smartsell-ui-kit 0.1.1 → 0.1.2

package/dist/index.cjs

@@ -39,12 +39,14 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 
-// src/components/Button.tsx
-var import_react2 = require("react");
-
 // src/foundation/async.ts
 var DEFAULT_ASYNC_SEARCH_DEBOUNCE_MS = 1500;
 
+// src/foundation/className.ts
+var cx = (...values) => {
+  return values.filter(Boolean).join(" ");
+};
+
 // src/foundation/color.ts
 function withAlpha(hex, alpha) {
   const normalized = hex.replace("#", "").trim();
@@ -72,52 +74,28 @@ var CONTROL_METRICS_BY_SIZE = {
     selectIndicatorOffset: 12
   },
   md: {
-    height: 38,
+    height: 34,
     fontSize: 14,
     lineHeight: "18px",
-    paddingX: 16,
-    paddingY: 9,
-    buttonPaddingX: 18,
-    selectPaddingRight: 44,
-    selectIndicatorOffset: 16
+    paddingX: 14,
+    paddingY: 7,
+    buttonPaddingX: 16,
+    selectPaddingRight: 42,
+    selectIndicatorOffset: 14
   },
   lg: {
-    height: 46,
+    height: 38,
     fontSize: 15,
     lineHeight: "18px",
-    paddingX: 18,
-    paddingY: 13,
-    buttonPaddingX: 20,
-    selectPaddingRight: 48,
-    selectIndicatorOffset: 18
+    paddingX: 16,
+    paddingY: 9,
+    buttonPaddingX: 18,
+    selectPaddingRight: 46,
+    selectIndicatorOffset: 16
   }
 };
 var getControlMetrics = (size) => CONTROL_METRICS_BY_SIZE[size];
-var getTextInputPadding = (size, options = {}) => {
-  var _a, _b;
-  const metrics = getControlMetrics(size);
-  const leadingInset = (_a = options.leadingInset) != null ? _a : 0;
-  const trailingInset = (_b = options.trailingInset) != null ? _b : 0;
-  return `${metrics.paddingY}px ${metrics.paddingX + trailingInset}px ${metrics.paddingY}px ${metrics.paddingX + leadingInset}px`;
-};
-var getSelectControlPadding = (size) => {
-  const metrics = getControlMetrics(size);
-  return `${metrics.paddingY}px ${metrics.selectPaddingRight}px ${metrics.paddingY}px ${metrics.paddingX}px`;
-};
 var getSelectIndicatorOffset = (size) => getControlMetrics(size).selectIndicatorOffset;
-var getButtonSizeStyles = (size) => {
-  const metrics = getControlMetrics(size);
-  return {
-    boxSizing: "border-box",
-    height: metrics.height,
-    padding: `0 ${metrics.buttonPaddingX}px`,
-    fontSize: metrics.fontSize,
-    lineHeight: metrics.lineHeight
-  };
-};
-
-// src/foundation/motion.ts
-var FIELD_SURFACE_TRANSITION = "border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease";
 
 // src/foundation/shadow.ts
 var LIGHT_SHADOW = "#B8B8B8";
@@ -129,6 +107,18 @@ function getComponentShadow(theme) {
   const shadowColor = (_a = colors.shadow) != null ? _a : fallbackShadow;
   return `${shadowColor} 0px 4px 5px`;
 }
+function getInsetBorderShadow(borderColor, options = {}) {
+  const {
+    outerShadow,
+    componentShadow = "var(--ui-kit-component-shadow)",
+    insetWidth = 1
+  } = options;
+  return [
+    outerShadow,
+    `inset 0 0 0 ${insetWidth}px ${borderColor}`,
+    componentShadow
+  ].filter(Boolean).join(", ");
+}
 
 // src/foundation/shape.ts
 var STANDARD_COMPONENT_BORDER_RADIUS = 16;
@@ -188,6 +178,47 @@ var assertThemeColorSchema = (theme) => {
 };
 assertThemeColorSchema(import_smartsell_theme.lightTheme);
 assertThemeColorSchema(import_smartsell_theme.darkTheme);
+var ROOT_THEME_VARIABLES = [
+  ["--theme-primary", "primary"],
+  ["--theme-primaryLight", "primaryLight"],
+  ["--theme-primaryDark", "primaryDark"],
+  ["--theme-shadow", "shadow"],
+  ["--theme-secondary", "secondary"],
+  ["--theme-background", "background"],
+  ["--theme-surface", "surface"],
+  ["--theme-text", "text"],
+  ["--theme-textLight", "textLight"],
+  ["--theme-positive", "positive"],
+  ["--theme-negative", "negative"],
+  ["--theme-warning", "warning"],
+  ["--theme-info", "info"],
+  ["--theme-onPrimary", "onPrimary"],
+  ["--theme-onSecondary", "onSecondary"]
+];
+var syncUiKitThemeVariables = (tokens) => {
+  if (typeof document === "undefined") {
+    return;
+  }
+  const rootStyle = document.documentElement.style;
+  ROOT_THEME_VARIABLES.forEach(([variableName, colorName]) => {
+    rootStyle.setProperty(variableName, tokens.theme.colors[colorName]);
+  });
+  rootStyle.setProperty("--ui-kit-border-soft", tokens.borderSoft);
+  rootStyle.setProperty("--ui-kit-border-strong", tokens.borderStrong);
+  rootStyle.setProperty("--ui-kit-surface-muted", tokens.surfaceMuted);
+  rootStyle.setProperty("--ui-kit-surface-raised", tokens.surfaceRaised);
+  rootStyle.setProperty("--ui-kit-overlay", tokens.overlay);
+  rootStyle.setProperty("--ui-kit-focus-ring", tokens.focusRing);
+  rootStyle.setProperty("--ui-kit-muted-text", tokens.mutedText);
+  rootStyle.setProperty("--ui-kit-component-shadow", getComponentShadow(tokens.theme));
+  rootStyle.setProperty("--ui-kit-card-bg", withAlpha(tokens.theme.colors.background, 0.7));
+  rootStyle.setProperty("--ui-kit-card-border", withAlpha(tokens.theme.colors.text, 0.5));
+  rootStyle.setProperty("--ui-kit-button-outline-hover", withAlpha(tokens.theme.colors.text, 0.08));
+  rootStyle.setProperty("--ui-kit-button-outline-active", withAlpha(tokens.theme.colors.text, 0.14));
+  rootStyle.setProperty("--ui-kit-button-ghost-border", withAlpha(tokens.theme.colors.primary, 0.5));
+  rootStyle.setProperty("--ui-kit-placeholder", withAlpha(tokens.theme.colors.text, 0.5));
+  rootStyle.setProperty("--ui-kit-negative-soft", withAlpha(tokens.theme.colors.negative, 0.12));
+};
 function normalizeUiKitTheme(theme) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
   const colors = theme.colors;
@@ -235,11 +266,61 @@ function createUiKitThemeTokens(themeSource) {
 }
 function useUiKitTheme() {
   const activeTheme = (0, import_smartsell_theme.useThemeValue)();
-  return (0, import_react.useMemo)(() => createUiKitThemeTokens(activeTheme), [activeTheme]);
+  const tokens = (0, import_react.useMemo)(() => createUiKitThemeTokens(activeTheme), [activeTheme]);
+  (0, import_react.useEffect)(() => {
+    syncUiKitThemeVariables(tokens);
+  }, [tokens]);
+  return tokens;
 }
 
 // src/components/Button.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
+var BUTTON_SIZE_CLASSNAMES = {
+  sm: "h-[30px] px-[14px] text-[13px] leading-4",
+  md: "h-[34px] px-4 text-sm leading-[18px]",
+  lg: "h-[38px] px-[18px] text-[15px] leading-[18px]"
+};
+var BUTTON_VARIANT_CLASSNAMES = {
+  solid: [
+    "border-[var(--theme-primary)]",
+    "bg-[var(--theme-primary)]",
+    "text-[var(--theme-onPrimary)]",
+    "shadow-[0px_4px_5px_var(--theme-shadow)]",
+    "hover:border-[var(--theme-primaryDark)]",
+    "hover:bg-[var(--theme-primaryDark)]",
+    "hover:-translate-y-[0.5px]",
+    "active:translate-y-px",
+    "active:scale-[0.985]"
+  ].join(" "),
+  outline: [
+    "border-[var(--theme-textLight)]",
+    "bg-transparent",
+    "text-[var(--theme-text)]",
+    "shadow-[0px_4px_5px_var(--theme-shadow)]",
+    "hover:-translate-y-[0.5px]",
+    "hover:bg-[var(--ui-kit-button-outline-hover)]",
+    "active:translate-y-px",
+    "active:scale-[0.985]",
+    "active:bg-[var(--ui-kit-button-outline-active)]"
+  ].join(" "),
+  ghost: [
+    "border-transparent",
+    "bg-transparent",
+    "text-[var(--theme-text)]",
+    "shadow-none",
+    "hover:-translate-y-[0.5px]",
+    "hover:border-[var(--ui-kit-button-ghost-border)]",
+    "hover:bg-[var(--theme-primary)]",
+    "hover:text-[var(--theme-onPrimary)]",
+    "hover:shadow-[0px_4px_5px_var(--theme-shadow)]",
+    "active:translate-y-px",
+    "active:scale-[0.985]",
+    "active:border-[var(--ui-kit-button-ghost-border)]",
+    "active:bg-[var(--theme-primary)]",
+    "active:text-[var(--theme-onPrimary)]",
+    "active:shadow-[0px_4px_5px_var(--theme-shadow)]"
+  ].join(" ")
+};
 function Button({
   variant = "solid",
   size = "sm",
@@ -247,137 +328,27 @@ function Button({
   trailingIcon,
   children,
   disabled,
-  style,
+  className,
   type = "button",
-  onMouseEnter,
-  onMouseLeave,
-  onMouseDown,
-  onMouseUp,
-  onBlur,
-  onKeyDown,
-  onKeyUp,
-  onTouchStart,
-  onTouchEnd,
-  onTouchCancel,
   ...rest
 }) {
-  var _a, _b;
-  const { theme } = useUiKitTheme();
-  const [isHovered, setIsHovered] = (0, import_react2.useState)(false);
-  const [isPressed, setIsPressed] = (0, import_react2.useState)(false);
-  const buttonShadow = getComponentShadow(theme);
-  const variantStyles = {
-    solid: {
-      backgroundColor: theme.colors.primary,
-      borderColor: theme.colors.primary,
-      color: theme.colors.onPrimary
-    },
-    outline: {
-      backgroundColor: "transparent",
-      borderColor: theme.colors.textLight,
-      color: theme.colors.text
-    },
-    ghost: {
-      backgroundColor: "transparent",
-      borderColor: "transparent"
-    }
-  };
-  const interactiveColor = variant === "solid" ? theme.colors.primary : theme.colors.text;
-  const isInteractive = !disabled;
-  const buttonTransform = isPressed ? "translateY(1px) scale(0.985)" : isHovered ? "translateY(-0.5px)" : "translateY(0)";
-  const interactionStyles = {
-    solid: {
-      transform: buttonTransform,
-      filter: void 0
-    },
-    outline: {
-      transform: buttonTransform,
-      backgroundColor: isPressed ? withAlpha(interactiveColor, 0.14) : isHovered ? withAlpha(interactiveColor, 0.08) : "transparent"
-    },
-    ghost: {
-      transform: buttonTransform,
-      backgroundColor: isPressed || isHovered ? theme.colors.primary : "transparent",
-      borderColor: isPressed || isHovered ? withAlpha(theme.colors.primary, 0.5) : "transparent",
-      color: isPressed || isHovered ? theme.colors.onPrimary : theme.colors.text
-    }
-  };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "button",
     {
       ...rest,
       type,
       disabled,
-      onMouseEnter: (event) => {
-        if (isInteractive) {
-          setIsHovered(true);
-        }
-        onMouseEnter == null ? void 0 : onMouseEnter(event);
-      },
-      onMouseLeave: (event) => {
-        setIsHovered(false);
-        setIsPressed(false);
-        onMouseLeave == null ? void 0 : onMouseLeave(event);
-      },
-      onMouseDown: (event) => {
-        if (isInteractive) {
-          setIsPressed(true);
-        }
-        onMouseDown == null ? void 0 : onMouseDown(event);
-      },
-      onMouseUp: (event) => {
-        setIsPressed(false);
-        onMouseUp == null ? void 0 : onMouseUp(event);
-      },
-      onBlur: (event) => {
-        setIsHovered(false);
-        setIsPressed(false);
-        onBlur == null ? void 0 : onBlur(event);
-      },
-      onKeyDown: (event) => {
-        if (isInteractive && (event.key === " " || event.key === "Enter")) {
-          setIsPressed(true);
-        }
-        onKeyDown == null ? void 0 : onKeyDown(event);
-      },
-      onKeyUp: (event) => {
-        setIsPressed(false);
-        onKeyUp == null ? void 0 : onKeyUp(event);
-      },
-      onTouchStart: (event) => {
-        if (isInteractive) {
-          setIsPressed(true);
-        }
-        onTouchStart == null ? void 0 : onTouchStart(event);
-      },
-      onTouchEnd: (event) => {
-        setIsPressed(false);
-        onTouchEnd == null ? void 0 : onTouchEnd(event);
-      },
-      onTouchCancel: (event) => {
-        setIsPressed(false);
-        onTouchCancel == null ? void 0 : onTouchCancel(event);
-      },
-      style: {
-        display: "inline-flex",
-        alignItems: "center",
-        justifyContent: "center",
-        gap: 10,
-        borderRadius: STANDARD_COMPONENT_BORDER_RADIUS,
-        borderStyle: "solid",
-        borderWidth: 1,
-        cursor: disabled ? "not-allowed" : "pointer",
-        fontWeight: 700,
-        letterSpacing: "0.01em",
-        opacity: disabled ? DISABLED_COMPONENT_OPACITY : 1,
-        boxShadow: variant === "ghost" && !isHovered ? "none" : buttonShadow,
-        transitionDuration: "0.3s",
-        width: (_a = style == null ? void 0 : style.width) != null ? _a : "fit-content",
-        maxWidth: (_b = style == null ? void 0 : style.maxWidth) != null ? _b : "fit-content",
-        ...getButtonSizeStyles(size),
-        ...variantStyles[variant],
-        ...isInteractive ? interactionStyles[variant] : void 0,
-        ...style
-      },
+      className: cx(
+        "box-border inline-flex w-fit max-w-fit items-center justify-center gap-2.5",
+        "rounded-2xl border border-solid font-bold tracking-[0.01em]",
+        "cursor-pointer transition-all duration-300",
+        `disabled:opacity-[${DISABLED_COMPONENT_OPACITY}]`,
+        "disabled:cursor-not-allowed",
+        "disabled:translate-y-0 disabled:scale-100",
+        BUTTON_SIZE_CLASSNAMES[size],
+        BUTTON_VARIANT_CLASSNAMES[variant],
+        className
+      ),
       children: [
         leadingIcon,
         children,
@@ -395,67 +366,30 @@ function Card({
   title,
   action,
   padded = true,
-  style,
+  className,
   ...rest
 }) {
-  const { theme } = useUiKitTheme();
-  const componentShadow = getComponentShadow(theme);
+  useUiKitTheme();
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "div",
     {
       ...rest,
-      style: {
-        borderRadius: 28,
-        border: `1px solid ${withAlpha(theme.colors.text, 0.5)}`,
-        background: `${withAlpha(theme.colors.background, 0.7)}`,
-        boxShadow: componentShadow,
-        color: theme.colors.text,
-        padding: padded ? 24 : void 0,
-        ...style
-      },
+      className: cx(
+        "rounded-[28px] border text-[var(--theme-text)]",
+        "shadow-[0px_4px_5px_var(--theme-shadow)]",
+        "[background:var(--ui-kit-card-bg)]",
+        "[border-color:var(--ui-kit-card-border)]",
+        padded && "p-6",
+        className
+      ),
       children: [
-        (eyebrow || title || action) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-          "div",
-          {
-            style: {
-              display: "flex",
-              justifyContent: "space-between",
-              alignItems: "flex-start",
-              gap: 16,
-              marginBottom: 18
-            },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
-                eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                  "span",
-                  {
-                    style: {
-                      color: theme.colors.textLight,
-                      fontSize: 12,
-                      fontWeight: 800,
-                      letterSpacing: "0.16em",
-                      textTransform: "uppercase"
-                    },
-                    children: eyebrow
-                  }
-                ) : null,
-                title ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                  "div",
-                  {
-                    style: {
-                      color: theme.colors.text,
-                      fontSize: 24,
-                      fontWeight: 700,
-                      lineHeight: 1.2
-                    },
-                    children: title
-                  }
-                ) : null
-              ] }),
-              action ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { color: theme.colors.text }, children: action }) : null
-            ]
-          }
-        ),
+        (eyebrow || title || action) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mb-[18px] flex items-start justify-between gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex flex-col gap-1.5", children: [
+            eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-xs font-extrabold uppercase tracking-[0.16em] text-[var(--theme-textLight)]", children: eyebrow }) : null,
+            title ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "text-2xl font-bold leading-[1.2] text-[var(--theme-text)]", children: title }) : null
+          ] }),
+          action ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "text-[var(--theme-text)]", children: action }) : null
+        ] }),
         children
       ]
     }
@@ -469,29 +403,25 @@ function CardSmall({
   value,
   icon,
   color,
+  className,
   style,
   ...rest
 }) {
-  const { theme, surfaceRaised, borderSoft } = useUiKitTheme();
+  const { theme } = useUiKitTheme();
   const accentColor = color != null ? color : theme.colors.primary;
-  const componentShadow = getComponentShadow(theme);
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "div",
     {
       ...rest,
+      className: cx(
+        "relative flex min-h-20 items-center gap-4 overflow-hidden",
+        "rounded-2xl border border-solid border-[var(--ui-kit-accent)]",
+        "bg-[var(--ui-kit-surface-raised)] pl-6 pr-6 text-[var(--theme-text)]",
+        "shadow-[0px_4px_5px_var(--theme-shadow)]",
+        className
+      ),
       style: {
-        position: "relative",
-        display: "flex",
-        alignItems: "center",
-        gap: 16,
-        minHeight: 80,
-        padding: "0px 0px 0px 24px",
-        borderRadius: STANDARD_COMPONENT_BORDER_RADIUS,
-        overflow: "hidden",
-        border: `1px solid ${theme.colors.textLight}`,
-        backgroundColor: surfaceRaised,
-        boxShadow: componentShadow,
-        color: theme.colors.text,
+        "--ui-kit-accent": accentColor,
         ...style
       },
       children: [
@@ -499,66 +429,24 @@ function CardSmall({
           "div",
           {
             "aria-hidden": "true",
-            style: {
-              position: "absolute",
-              left: 0,
-              top: 0,
-              bottom: 0,
-              width: 25,
-              backgroundColor: accentColor
-            }
+            className: "absolute inset-y-0 left-0 w-[25px] bg-[var(--ui-kit-accent)]"
           }
         ),
         icon ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "div",
           {
             "aria-hidden": "true",
-            style: {
-              width: 52,
-              height: 52,
-              borderRadius: 12,
-              backgroundColor: withAlpha(accentColor, 0.24),
-              color: accentColor,
-              display: "inline-flex",
-              alignItems: "center",
-              justifyContent: "center",
-              flexShrink: 0,
-              marginLeft: 16
-            },
+            className: cx(
+              "ml-4 inline-flex h-[52px] w-[52px] shrink-0 items-center justify-center",
+              "rounded-xl bg-[color-mix(in_srgb,var(--ui-kit-accent)_24%,transparent)]",
+              "text-[var(--ui-kit-accent)]"
+            ),
             children: icon
           }
         ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 6, minWidth: 0 }, children: [
-          title ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            "div",
-            {
-              style: {
-                color: theme.colors.text,
-                fontSize: 14,
-                fontWeight: 700,
-                lineHeight: 1.25,
-                overflow: "hidden",
-                textOverflow: "ellipsis",
-                whiteSpace: "nowrap"
-              },
-              children: title
-            }
-          ) : null,
-          value ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            "div",
-            {
-              style: {
-                color: theme.colors.text,
-                fontSize: 18,
-                fontWeight: 800,
-                lineHeight: 1.15,
-                overflow: "hidden",
-                textOverflow: "ellipsis",
-                whiteSpace: "nowrap"
-              },
-              children: value
-            }
-          ) : null
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex min-w-0 flex-col gap-1.5", children: [
+          title ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "truncate text-sm font-bold leading-[1.25] text-[var(--theme-text)]", children: title }) : null,
+          value ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "truncate text-[18px] font-extrabold leading-[1.15] text-[var(--theme-text)]", children: value }) : null
         ] })
       ]
     }
@@ -566,12 +454,17 @@ function CardSmall({
 }
 
 // src/components/Checkbox.tsx
-var import_react3 = require("react");
+var import_react2 = require("react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var CHECKBOX_SIZE_BY_CONTROL_SIZE = {
-  sm: 18,
-  md: 20,
-  lg: 22
+  sm: 14,
+  md: 16,
+  lg: 20
+};
+var CHECKBOX_LABEL_CLASSNAMES = {
+  sm: "text-[13px] leading-4",
+  md: "text-sm leading-[18px]",
+  lg: "text-[15px] leading-[18px]"
 };
 var getCheckboxSize = (controlSize) => CHECKBOX_SIZE_BY_CONTROL_SIZE[controlSize];
 var hasNodeContent = (value) => {
@@ -660,19 +553,18 @@ function Checkbox({
   ...rest
 }) {
   const { theme, mutedText } = useUiKitTheme();
-  const controlMetrics = getControlMetrics(controlSize);
   const indicatorSize = getCheckboxSize(controlSize);
   const hasLabel = hasNodeContent(label);
   const hasHint = hasNodeContent(hint);
   const hasError = hasNodeContent(error);
   const hasSecondaryContent = hasLabel && hasHint;
-  const resolvedId = id != null ? id : `ss-checkbox-${(0, import_react3.useId)().replace(/:/g, "")}`;
-  const inputRef = (0, import_react3.useRef)(null);
-  const [isFocused, setIsFocused] = (0, import_react3.useState)(false);
-  const [internalChecked, setInternalChecked] = (0, import_react3.useState)(Boolean(defaultChecked));
+  const resolvedId = id != null ? id : `ss-checkbox-${(0, import_react2.useId)().replace(/:/g, "")}`;
+  const inputRef = (0, import_react2.useRef)(null);
+  const [isFocused, setIsFocused] = (0, import_react2.useState)(false);
+  const [internalChecked, setInternalChecked] = (0, import_react2.useState)(Boolean(defaultChecked));
   const isControlled = checked !== void 0;
   const resolvedChecked = isControlled ? Boolean(checked) : internalChecked;
-  (0, import_react3.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     if (!inputRef.current) {
       return;
     }
@@ -681,43 +573,28 @@ function Checkbox({
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "div",
     {
-      className,
-      style: {
-        width: "100%",
-        display: "flex",
-        flexDirection: "column",
-        gap: 6,
-        ...style
-      },
+      className: cx("flex w-full flex-col gap-1.5", className),
+      style,
       children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
         "label",
         {
           htmlFor: resolvedId,
-          style: {
-            display: "inline-flex",
-            alignItems: hasSecondaryContent ? "flex-start" : "center",
-            gap: 10,
-            width: hasLabel || hasHint || hasError ? "100%" : "auto",
-            cursor: disabled ? "not-allowed" : "pointer",
-            opacity: disabled ? DISABLED_FIELD_OPACITY : 1,
-            userSelect: "none"
-          },
+          className: cx(
+            "inline-flex select-none gap-2.5",
+            hasSecondaryContent ? "items-start" : "items-center",
+            hasLabel || hasHint || hasError ? "w-full" : "w-auto",
+            disabled ? "cursor-not-allowed opacity-70" : "cursor-pointer"
+          ),
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
               "span",
               {
-                style: {
-                  position: "relative",
-                  display: "inline-flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  flexShrink: 0,
-                  padding: 2,
-                  marginTop: hasSecondaryContent ? 1 : 0,
-                  borderRadius: 999,
-                  boxShadow: isFocused ? `0 0 0 3px ${withAlpha(theme.colors.primary, 0.16)}` : "none",
-                  transition: "box-shadow 140ms ease"
-                },
+                className: cx(
+                  "relative inline-flex shrink-0 items-center justify-center rounded-full p-0.5",
+                  hasSecondaryContent ? "mt-px" : "mt-0",
+                  "transition-shadow duration-150",
+                  isFocused ? "shadow-[0_0_0_3px_var(--ui-kit-focus-ring)]" : "shadow-none"
+                ),
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                     "input",
@@ -743,15 +620,10 @@ function Checkbox({
                         setIsFocused(false);
                         onBlur == null ? void 0 : onBlur(event);
                       },
-                      style: {
-                        position: "absolute",
-                        inset: 0,
-                        width: "100%",
-                        height: "100%",
-                        margin: 0,
-                        opacity: 0,
-                        cursor: disabled ? "not-allowed" : "pointer"
-                      }
+                      className: cx(
+                        "absolute inset-0 m-0 h-full w-full opacity-0",
+                        disabled ? "cursor-not-allowed" : "cursor-pointer"
+                      )
                     }
                   ),
                   /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -773,52 +645,17 @@ function Checkbox({
             hasLabel || hasHint || hasError ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
               "span",
               {
-                style: {
-                  display: "flex",
-                  flexDirection: "column",
-                  gap: 4,
-                  justifyContent: hasSecondaryContent ? "flex-start" : "center",
-                  minWidth: 0
-                },
+                className: cx(
+                  "flex min-w-0 flex-col gap-1",
+                  hasSecondaryContent ? "justify-start" : "justify-center"
+                ),
                 children: [
-                  label ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-                    "span",
-                    {
-                      style: {
-                        color: theme.colors.text,
-                        fontSize: controlMetrics.fontSize,
-                        lineHeight: controlMetrics.lineHeight,
-                        fontWeight: 600
-                      },
-                      children: [
-                        label,
-                        required ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { color: theme.colors.negative, marginLeft: 4 }, children: "*" }) : null
-                      ]
-                    }
-                  ) : null,
-                  hint ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                    "span",
-                    {
-                      style: {
-                        color: mutedText,
-                        fontSize: 13,
-                        lineHeight: 1.45
-                      },
-                      children: hint
-                    }
-                  ) : null,
-                  error ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                    "span",
-                    {
-                      style: {
-                        color: theme.colors.negative,
-                        fontSize: 13,
-                        lineHeight: 1.45,
-                        fontWeight: 600
-                      },
-                      children: error
-                    }
-                  ) : null
+                  label ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: cx("font-semibold text-[var(--theme-text)]", CHECKBOX_LABEL_CLASSNAMES[controlSize]), children: [
+                    label,
+                    required ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "ml-1 text-[var(--theme-negative)]", children: "*" }) : null
+                  ] }) : null,
+                  hint ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-[13px] leading-[1.45] text-[var(--ui-kit-muted-text)]", children: hint }) : null,
+                  error ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-[13px] font-semibold leading-[1.45] text-[var(--theme-negative)]", children: error }) : null
                 ]
               }
             ) : null
@@ -830,22 +667,11 @@ function Checkbox({
 }
 
 // src/components/ComposableModal.tsx
-var import_react5 = require("react");
+var import_react4 = require("react");
 
 // src/components/Modal.tsx
-var import_react4 = require("react");
+var import_react3 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var srOnlyStyle = {
-  position: "absolute",
-  width: 1,
-  height: 1,
-  padding: 0,
-  margin: -1,
-  overflow: "hidden",
-  clip: "rect(0, 0, 0, 0)",
-  whiteSpace: "nowrap",
-  border: 0
-};
 var isUiKitThemeTokens = (theme) => {
   return Boolean(theme && typeof theme === "object" && "theme" in theme);
 };
@@ -896,7 +722,6 @@ function ModalActionButton({
   theme
 }) {
   var _a, _b;
-  const { colors } = theme;
   const {
     label,
     onClick,
@@ -904,54 +729,24 @@ function ModalActionButton({
     disabled = false,
     style
   } = action;
-  const buttonStyle = {
-    width: "100%",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    borderRadius: "0.4rem",
-    padding: appearance === "link" ? 0 : "0.9rem 1.15rem",
-    boxSizing: "border-box",
-    cursor: disabled ? "not-allowed" : "pointer",
-    fontWeight: 700,
-    fontSize: "1.05rem",
-    lineHeight: 1.2,
-    margin: 0,
-    textAlign: "center",
-    transition: "0.5s",
-    opacity: disabled ? DISABLED_COMPONENT_OPACITY : 1,
-    filter: disabled ? "saturate(0)" : void 0
-  };
-  if (appearance === "text") {
-    buttonStyle.background = "none";
-    buttonStyle.border = "1px solid transparent";
-    buttonStyle.color = colors.primary;
-    buttonStyle.boxShadow = "none";
-  } else if (appearance === "link") {
-    buttonStyle.background = "none";
-    buttonStyle.border = "none";
-    buttonStyle.color = colors.primary;
-    buttonStyle.boxShadow = "none";
-  } else if (appearance === "outlined") {
-    buttonStyle.background = "none";
-    buttonStyle.border = `2px solid ${colors.primary}`;
-    buttonStyle.color = colors.primary;
-    buttonStyle.boxShadow = `0 14px 28px ${withAlpha(colors.text, 0.08)}`;
-  } else {
-    buttonStyle.background = colors.primary;
-    buttonStyle.border = "1px solid transparent";
-    buttonStyle.color = colors.onPrimary;
-    buttonStyle.boxShadow = `0 14px 28px ${withAlpha(colors.primary, 0.22)}`;
-  }
+  const buttonClassName = cx(
+    "flex w-full items-center justify-center rounded-[0.4rem] box-border",
+    "m-0 text-center font-bold leading-[1.2]",
+    appearance === "link" ? "p-0 text-[1.05rem]" : "px-[1.15rem] py-[0.9rem] text-[1.05rem]",
+    disabled ? "cursor-not-allowed saturate-0" : "cursor-pointer",
+    appearance === "text" && "border border-transparent bg-transparent text-[var(--ui-kit-modal-primary)] shadow-none",
+    appearance === "link" && "border-0 bg-transparent text-[var(--ui-kit-modal-primary)] shadow-none",
+    appearance === "outlined" && "border-2 border-[var(--ui-kit-modal-primary)] bg-transparent",
+    appearance === "outlined" && "text-[var(--ui-kit-modal-primary)] shadow-[var(--ui-kit-modal-button-shadow-outlined)]",
+    appearance === "contained" && "border border-transparent bg-[var(--ui-kit-modal-primary)]",
+    appearance === "contained" && "text-[var(--ui-kit-modal-on-primary)] shadow-[var(--ui-kit-modal-button-shadow-contained)]"
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "div",
     {
+      className: "m-0 flex items-center justify-center",
       style: {
         width: (_a = style == null ? void 0 : style.width) != null ? _a : (style == null ? void 0 : style.maxWidth) ? "100%" : "max-content",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        margin: 0,
         marginBottom: (_b = style == null ? void 0 : style.marginBottom) != null ? _b : 0,
         ...style
       },
@@ -961,7 +756,8 @@ function ModalActionButton({
           type: "button",
           onClick: disabled ? void 0 : onClick,
           disabled,
-          style: buttonStyle,
+          className: buttonClassName,
+          style: { opacity: disabled ? DISABLED_COMPONENT_OPACITY : 1 },
           children: label
         }
       )
@@ -976,19 +772,13 @@ function ModalBusyIndicator({
     {
       "aria-live": "polite",
       role: "status",
+      className: "relative inline-flex h-14 w-14 items-center justify-center rounded-full",
       style: {
-        position: "relative",
-        display: "inline-flex",
-        alignItems: "center",
-        justifyContent: "center",
-        width: 56,
-        height: 56,
-        borderRadius: 999,
         backgroundColor: withAlpha(theme.colors.surface, 0.88),
         boxShadow: `0 18px 36px ${withAlpha(theme.colors.text, 0.08)}`
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: srOnlyStyle, children: "Loading" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "ui-kit-sr-only", children: "Loading" }),
         /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { "aria-hidden": "true", width: "32", height: "32", viewBox: "0 0 40 40", fill: "none", children: [
           /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "circle",
@@ -1025,6 +815,33 @@ function ModalBusyIndicator({
     }
   );
 }
+function MaximizeIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { "aria-hidden": "true", width: "15", height: "15", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("rect", { x: "4.25", y: "4.25", width: "11.5", height: "11.5", rx: "2.2", stroke: "currentColor", strokeWidth: "1.7" }) });
+}
+function MinimizeIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { "aria-hidden": "true", width: "15", height: "15", viewBox: "0 0 20 20", fill: "none", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "path",
+      {
+        d: "M6.25 4.75H13a2.25 2.25 0 0 1 2.25 2.25v6.75",
+        stroke: "currentColor",
+        strokeWidth: "1.7",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "path",
+      {
+        d: "M13.75 9.5v4.25a1.5 1.5 0 0 1-1.5 1.5H6a1.75 1.75 0 0 1-1.75-1.75V7.75A1.5 1.5 0 0 1 5.75 6.25H10",
+        stroke: "currentColor",
+        strokeWidth: "1.7",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  ] });
+}
 function UnifiedModal({
   isOpen,
   onClose,
@@ -1050,15 +867,30 @@ function UnifiedModal({
 }) {
   var _a, _b;
   const inheritedTheme = useUiKitTheme();
-  const modalTheme = (0, import_react4.useMemo)(() => resolveTheme(inheritedTheme, theme), [inheritedTheme, theme]);
-  const modalShadow = (0, import_react4.useMemo)(() => {
+  const modalTheme = (0, import_react3.useMemo)(() => resolveTheme(inheritedTheme, theme), [inheritedTheme, theme]);
+  const modalShadow = (0, import_react3.useMemo)(() => {
     return `0 34px 80px ${withAlpha(modalTheme.theme.colors.shadow, 0.28)}`;
   }, [modalTheme.theme.colors.shadow]);
-  const controlShadow = (0, import_react4.useMemo)(() => getComponentShadow(modalTheme.theme), [modalTheme.theme]);
-  const [isMaximized, setIsMaximized] = (0, import_react4.useState)(maximized != null ? maximized : false);
-  const titleId = (0, import_react4.useMemo)(() => createTitleId(title), [title]);
+  const controlShadow = (0, import_react3.useMemo)(() => getComponentShadow(modalTheme.theme), [modalTheme.theme]);
+  const modalVariables = (0, import_react3.useMemo)(() => ({
+    "--ui-kit-modal-overlay": modalTheme.overlay,
+    "--ui-kit-modal-surface": modalTheme.colors.surface,
+    "--ui-kit-modal-surface-raised": modalTheme.surfaceRaised,
+    "--ui-kit-modal-text": modalTheme.colors.text,
+    "--ui-kit-modal-border-soft": modalTheme.borderSoft,
+    "--ui-kit-modal-divider": withAlpha(modalTheme.colors.text, 0.06),
+    "--ui-kit-modal-primary": modalTheme.colors.primary,
+    "--ui-kit-modal-on-primary": modalTheme.colors.onPrimary,
+    "--ui-kit-modal-shadow": modalShadow,
+    "--ui-kit-modal-control-shadow": controlShadow,
+    "--ui-kit-modal-busy-overlay": withAlpha(modalTheme.colors.surface, 0.58),
+    "--ui-kit-modal-button-shadow-outlined": `0 14px 28px ${withAlpha(modalTheme.colors.text, 0.08)}`,
+    "--ui-kit-modal-button-shadow-contained": `0 14px 28px ${withAlpha(modalTheme.colors.primary, 0.22)}`
+  }), [controlShadow, modalShadow, modalTheme]);
+  const [isMaximized, setIsMaximized] = (0, import_react3.useState)(maximized != null ? maximized : false);
+  const titleId = (0, import_react3.useMemo)(() => createTitleId(title), [title]);
   const shouldDisableDismiss = disableDismiss || isBusy;
-  (0, import_react4.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (typeof maximized === "boolean") {
       setIsMaximized(maximized);
       return;
@@ -1067,7 +899,7 @@ function UnifiedModal({
       setIsMaximized(true);
     }
   }, [maximized]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (!isOpen || typeof window === "undefined" || typeof document === "undefined") {
       return;
     }
@@ -1091,13 +923,7 @@ function UnifiedModal({
     "h2",
     {
       id: titleId,
-      style: {
-        margin: 0,
-        color: modalTheme.colors.text,
-        fontSize: 24,
-        fontWeight: 800,
-        lineHeight: 1.1
-      },
+      className: "m-0 text-2xl font-extrabold leading-[1.1] text-[var(--ui-kit-modal-text)]",
       children: title
     }
   ) : null;
@@ -1162,62 +988,49 @@ function UnifiedModal({
           onClose();
         }
       },
+      className: "fixed inset-0 z-[70] flex items-center justify-center backdrop-blur-[8px]",
       style: {
-        position: "fixed",
-        inset: 0,
-        zIndex: 70,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
+        ...modalVariables,
         padding: isMaximized ? 0 : 16,
-        backgroundColor: modalTheme.overlay,
-        backdropFilter: "blur(8px)"
+        backgroundColor: "var(--ui-kit-modal-overlay)"
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
         "div",
         {
+          className: cx(
+            "relative flex flex-col overflow-hidden border",
+            "bg-[linear-gradient(180deg,var(--ui-kit-modal-surface-raised),var(--ui-kit-modal-surface))]",
+            "text-[var(--ui-kit-modal-text)]",
+            isMaximized ? "rounded-none" : "rounded-[30px]"
+          ),
           style: {
-            position: "relative",
-            display: "flex",
-            flexDirection: "column",
             width: isMaximized ? "100vw" : "min(100%, 100%)",
             maxWidth: isMaximized ? "100vw" : normalizeWidth(maxWidth),
             height: isMaximized ? "100vh" : void 0,
             maxHeight: isMaximized ? "100vh" : "calc(100vh - 32px)",
             minWidth: isMaximized ? "100vw" : 300,
-            borderRadius: isMaximized ? 0 : 30,
-            border: `1px solid ${modalTheme.borderSoft}`,
-            background: `linear-gradient(180deg, ${modalTheme.surfaceRaised}, ${modalTheme.colors.surface})`,
-            boxShadow: modalShadow,
-            color: modalTheme.colors.text,
-            overflow: "hidden",
+            borderColor: "var(--ui-kit-modal-border-soft)",
+            boxShadow: "var(--ui-kit-modal-shadow)",
             ...contentStyle
           },
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
               "div",
               {
-                style: {
-                  display: "flex",
-                  alignItems: "flex-start",
-                  justifyContent: "space-between",
-                  gap: 12,
-                  padding: "18px 20px 12px",
-                  borderBottom: `1px solid ${withAlpha(modalTheme.colors.text, 0.06)}`
-                },
+                className: "flex items-start justify-between gap-3 border-b px-5 pb-3 pt-[18px]",
+                style: { borderColor: "var(--ui-kit-modal-divider)" },
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                     "div",
                     {
-                      style: {
-                        flex: 1,
-                        opacity: isBusy ? 0.38 : 1,
-                        transition: "opacity 180ms ease"
-                      },
+                      className: cx(
+                        "flex-1 transition-opacity duration-150",
+                        isBusy ? "opacity-[0.38]" : "opacity-100"
+                      ),
                       children: resolvedHeader
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-2", children: [
                     !hideExpandButton ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                       "button",
                       {
@@ -1225,19 +1038,9 @@ function UnifiedModal({
                         title: isMaximized ? "Minimize" : "Maximize",
                         type: "button",
                         onClick: () => setIsMaximized((current) => !current),
-                        style: {
-                          height: 30,
-                          width: 30,
-                          borderRadius: 999,
-                          border: `1px solid ${modalTheme.borderSoft}`,
-                          backgroundColor: "transparent",
-                          color: modalTheme.colors.text,
-                          cursor: "pointer",
-                          fontSize: 18,
-                          fontWeight: 700,
-                          boxShadow: controlShadow
-                        },
-                        children: isMaximized ? "\u25A2" : "\u25A1"
+                        className: "m-0 inline-flex h-[30px] w-[30px] shrink-0 cursor-pointer appearance-none items-center justify-center rounded-full border bg-transparent p-0 text-[var(--ui-kit-modal-text)] leading-none shadow-[var(--ui-kit-modal-control-shadow)]",
+                        style: { borderColor: "var(--ui-kit-modal-border-soft)" },
+                        children: isMaximized ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MinimizeIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MaximizeIcon, {})
                       }
                     ) : null,
                     !hideCloseButton ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
@@ -1246,18 +1049,15 @@ function UnifiedModal({
                         "aria-label": "Close modal",
                         type: "button",
                         onClick: shouldDisableDismiss ? void 0 : onClose,
+                        className: cx(
+                          "flex h-[30px] w-[30px] items-center justify-center rounded-full border",
+                          "bg-transparent text-[20px] font-bold text-[var(--ui-kit-modal-text)]",
+                          "shadow-[var(--ui-kit-modal-control-shadow)]",
+                          shouldDisableDismiss ? "cursor-not-allowed" : "cursor-pointer"
+                        ),
                         style: {
-                          height: 30,
-                          width: 30,
-                          borderRadius: 999,
-                          border: `1px solid ${modalTheme.borderSoft}`,
-                          backgroundColor: "transparent",
-                          color: modalTheme.colors.text,
-                          cursor: shouldDisableDismiss ? "not-allowed" : "pointer",
-                          fontSize: 20,
-                          fontWeight: 700,
-                          opacity: shouldDisableDismiss ? DISABLED_COMPONENT_OPACITY : 1,
-                          boxShadow: controlShadow
+                          borderColor: "var(--ui-kit-modal-border-soft)",
+                          opacity: shouldDisableDismiss ? DISABLED_COMPONENT_OPACITY : 1
                         },
                         children: "\xD7"
                       }
@@ -1269,39 +1069,23 @@ function UnifiedModal({
             /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
               "div",
               {
-                style: {
-                  flex: 1,
-                  minHeight: 0,
-                  position: "relative",
-                  overflow: "auto",
-                  padding: 24,
-                  ...bodyStyle
-                },
+                className: "relative min-h-0 flex-1 overflow-auto p-6",
+                style: bodyStyle,
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                     "div",
                     {
-                      style: {
-                        opacity: isBusy ? 0.38 : 1,
-                        filter: isBusy ? "saturate(0.8)" : "none",
-                        pointerEvents: isBusy ? "none" : "auto",
-                        transition: "opacity 180ms ease, filter 180ms ease"
-                      },
+                      className: cx(
+                        "transition-[opacity,filter] duration-150",
+                        isBusy ? "pointer-events-none opacity-[0.38] saturate-[0.8]" : "pointer-events-auto opacity-100 saturate-100"
+                      ),
                       children
                     }
                   ),
                   isBusy ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                     "div",
                     {
-                      style: {
-                        position: "absolute",
-                        inset: 0,
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                        backgroundColor: withAlpha(modalTheme.colors.surface, 0.58),
-                        backdropFilter: "blur(2px)"
-                      },
+                      className: "absolute inset-0 flex items-center justify-center bg-[var(--ui-kit-modal-busy-overlay)] backdrop-blur-[2px]",
                       children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ModalBusyIndicator, { theme: modalTheme })
                     }
                   ) : null
@@ -1311,13 +1095,8 @@ function UnifiedModal({
             shouldRenderFooter ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               "div",
               {
-                style: {
-                  display: "flex",
-                  justifyContent: "flex-end",
-                  gap: 10,
-                  padding: "12px 20px 16px",
-                  borderTop: `1px solid ${withAlpha(modalTheme.colors.text, 0.06)}`
-                },
+                className: "flex justify-end gap-2.5 border-t px-5 pb-4 pt-3",
+                style: { borderColor: "var(--ui-kit-modal-divider)" },
                 children: footerContent
               }
             ) : null
@@ -1360,7 +1139,7 @@ function ComposableModal({
   children
 }) {
   const slotIds = createModalSlotIds(slotBaseId);
-  const context = (0, import_react5.useMemo)(
+  const context = (0, import_react4.useMemo)(
     () => ({
       title,
       payload,
@@ -1380,12 +1159,7 @@ function ComposableModal({
   const defaultHeader = headerFallback != null ? headerFallback : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "h2",
     {
-      style: {
-        margin: 0,
-        fontSize: 30,
-        fontWeight: 800,
-        lineHeight: 1.1
-      },
+      className: "m-0 text-[24px] font-extrabold leading-[1.1]",
       children: title
     }
   );
@@ -1422,10 +1196,10 @@ function ComposableModal({
 }
 
 // src/components/DatePicker.tsx
-var import_react7 = require("react");
+var import_react6 = require("react");
 
 // src/components/Input.tsx
-var import_react6 = require("react");
+var import_react5 = require("react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var PASSWORD_TOGGLE_METRICS_BY_SIZE = {
   sm: {
@@ -1435,18 +1209,33 @@ var PASSWORD_TOGGLE_METRICS_BY_SIZE = {
     iconSize: 14
   },
   md: {
+    buttonSize: 19,
+    leftOffset: 9,
+    contentGap: 9,
+    iconSize: 15
+  },
+  lg: {
     buttonSize: 20,
     leftOffset: 10,
     contentGap: 10,
     iconSize: 16
-  },
-  lg: {
-    buttonSize: 22,
-    leftOffset: 12,
-    contentGap: 12,
-    iconSize: 18
   }
 };
+var FIELD_HEIGHT_CLASSNAMES = {
+  sm: "h-[30px]",
+  md: "h-[34px]",
+  lg: "h-[38px]"
+};
+var FIELD_TEXT_CLASSNAMES = {
+  sm: "text-[13px] leading-4",
+  md: "text-sm leading-[18px]",
+  lg: "text-[15px] leading-[18px]"
+};
+var FIELD_PADDING_X_CLASSNAMES = {
+  sm: "px-3",
+  md: "px-[14px]",
+  lg: "px-4"
+};
 var getPasswordToggleMetrics = (size) => PASSWORD_TOGGLE_METRICS_BY_SIZE[size];
 function ControlFrame({
   label,
@@ -1458,88 +1247,40 @@ function ControlFrame({
   children,
   style
 }) {
-  const { theme, mutedText } = useUiKitTheme();
+  useUiKitTheme();
   if (!label && !hint && !error) {
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children });
   }
-  const labelStyle = {
-    color: theme.colors.text,
-    fontSize: 14,
-    fontWeight: 700,
-    letterSpacing: "0.01em"
-  };
-  const wrapperStyle = {
-    display: "flex",
-    flexDirection: "column",
-    gap: 8,
-    width: "100%",
-    ...style
-  };
   if (!useLabelWrapper) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: wrapperStyle, children: [
-      label || hint ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [
-        label ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { htmlFor, style: labelStyle, children: [
-          label,
-          required ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: { color: theme.colors.negative, marginLeft: 4 }, children: "*" }) : null
-        ] }) : null,
-        hint ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          "span",
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex w-full flex-col gap-2", style, children: [
+      label || hint ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col gap-1", children: [
+        label ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+          "label",
           {
-            style: {
-              color: mutedText,
-              fontSize: 13,
-              lineHeight: 1.45
-            },
-            children: hint
+            htmlFor,
+            className: "text-sm font-bold tracking-[0.01em] text-[var(--theme-text)]",
+            children: [
+              label,
+              required ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "ml-1 text-[var(--theme-negative)]", children: "*" }) : null
+            ]
           }
-        ) : null
+        ) : null,
+        hint ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-[13px] leading-[1.45] text-[var(--ui-kit-muted-text)]", children: hint }) : null
       ] }) : null,
       children,
-      error ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        "span",
-        {
-          style: {
-            color: theme.colors.negative,
-            fontSize: 13,
-            fontWeight: 600,
-            lineHeight: 1.45
-          },
-          children: error
-        }
-      ) : null
+      error ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-[13px] font-semibold leading-[1.45] text-[var(--theme-negative)]", children: error }) : null
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { htmlFor, style: wrapperStyle, children: [
-    label || hint ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [
-      label ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { style: labelStyle, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { htmlFor, className: "flex w-full flex-col gap-2", style, children: [
+    label || hint ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col gap-1", children: [
+      label ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "text-sm font-bold tracking-[0.01em] text-[var(--theme-text)]", children: [
         label,
-        required ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: { color: theme.colors.negative, marginLeft: 4 }, children: "*" }) : null
+        required ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "ml-1 text-[var(--theme-negative)]", children: "*" }) : null
       ] }) : null,
-      hint ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        "span",
-        {
-          style: {
-            color: mutedText,
-            fontSize: 13,
-            lineHeight: 1.45
-          },
-          children: hint
-        }
-      ) : null
+      hint ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-[13px] leading-[1.45] text-[var(--ui-kit-muted-text)]", children: hint }) : null
     ] }) : null,
     children,
-    error ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      "span",
-      {
-        style: {
-          color: theme.colors.negative,
-          fontSize: 13,
-          fontWeight: 600,
-          lineHeight: 1.45
-        },
-        children: error
-      }
-    ) : null
+    error ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-[13px] font-semibold leading-[1.45] text-[var(--theme-negative)]", children: error }) : null
   ] });
 }
 function Input({
@@ -1547,6 +1288,7 @@ function Input({
   hint,
   error,
   controlSize = "sm",
+  className,
   showPasswordToggle = true,
   fileButtonLabel,
   id,
@@ -1557,49 +1299,27 @@ function Input({
   type = "text",
   ...rest
 }) {
-  const { theme } = useUiKitTheme();
+  useUiKitTheme();
   const controlMetrics = getControlMetrics(controlSize);
-  const componentShadow = getComponentShadow(theme);
   const passwordToggleMetrics = getPasswordToggleMetrics(controlSize);
-  const generatedId = (0, import_react6.useId)();
+  const generatedId = (0, import_react5.useId)();
   const inputId = id != null ? id : generatedId;
-  const fileInputRef = (0, import_react6.useRef)(null);
-  const [isPasswordVisible, setIsPasswordVisible] = (0, import_react6.useState)(false);
-  const [selectedFileNames, setSelectedFileNames] = (0, import_react6.useState)([]);
+  const fileInputRef = (0, import_react5.useRef)(null);
+  const [isPasswordVisible, setIsPasswordVisible] = (0, import_react5.useState)(false);
+  const [selectedFileNames, setSelectedFileNames] = (0, import_react5.useState)([]);
   const isPasswordField = type === "password";
   const isEmailField = type === "email";
   const isFileField = type === "file";
   const canTogglePasswordVisibility = isPasswordField && showPasswordToggle;
   const resolvedType = canTogglePasswordVisibility ? isPasswordVisible ? "text" : "password" : type;
-  (0, import_react6.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (!isFileField) {
       setSelectedFileNames([]);
     }
   }, [isFileField]);
-  const inputBorderColor = error ? theme.colors.negative : theme.colors.textLight;
-  const adornedFieldShadow = `0 0 0 1px ${inputBorderColor}, ${componentShadow}`;
-  const inputStyle = {
-    width: "100%",
-    boxSizing: "border-box",
-    height: controlMetrics.height,
-    borderRadius: STANDARD_COMPONENT_BORDER_RADIUS,
-    border: `1px solid ${inputBorderColor}`,
-    backgroundColor: theme.colors.surface,
-    color: theme.colors.text,
-    cursor: disabled ? "not-allowed" : "text",
-    opacity: disabled ? DISABLED_FIELD_OPACITY : 1,
-    padding: getTextInputPadding(controlSize),
-    outline: "none",
-    boxShadow: componentShadow,
-    fontSize: controlMetrics.fontSize,
-    lineHeight: controlMetrics.lineHeight,
-    transition: FIELD_SURFACE_TRANSITION,
-    ...style
-  };
   const hasFileButtonLabel = typeof fileButtonLabel === "string" ? fileButtonLabel.trim().length > 0 : fileButtonLabel != null;
   const hasSelectedFiles = selectedFileNames.length > 0;
   const showUploadLabel = hasFileButtonLabel && !hasSelectedFiles;
-  const inputPlaceholderColor = withAlpha(theme.colors.text, 0.5);
   const passwordLockIconSize = passwordToggleMetrics.iconSize + 2;
   const leadingContentGap = Math.max(0, Math.round(controlMetrics.paddingX / 3));
   const fileSelectionText = selectedFileNames.length === 0 ? placeholder != null ? placeholder : "" : selectedFileNames.length === 1 ? selectedFileNames[0] : `${selectedFileNames.length} files selected`;
@@ -1607,144 +1327,32 @@ function Input({
   const fileTriggerWidth = controlMetrics.paddingX + fileIconSize;
   const emailAdornmentWidth = controlMetrics.paddingX + fileIconSize;
   const passwordAdornmentWidth = controlMetrics.paddingX + passwordLockIconSize;
-  const hiddenFileInputStyle = {
-    display: "none"
-  };
-  const fileTriggerStyle = {
-    flexShrink: 0,
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: showUploadLabel ? "flex-start" : "center",
-    alignSelf: "stretch",
-    gap: showUploadLabel ? leadingContentGap : 0,
-    width: showUploadLabel ? void 0 : fileTriggerWidth,
-    padding: showUploadLabel ? `0 ${controlMetrics.buttonPaddingX}px 0 ${Math.max(8, Math.round(controlMetrics.paddingX / 2))}px` : 0,
-    borderRadius: "15px 0 0 15px",
-    border: "none",
-    backgroundColor: "transparent",
-    color: theme.colors.text,
-    fontSize: controlMetrics.fontSize,
-    fontWeight: 700,
-    lineHeight: controlMetrics.lineHeight,
-    whiteSpace: "nowrap",
-    cursor: disabled ? "not-allowed" : "pointer",
-    appearance: "none"
-  };
-  const fileIconStyle = {
-    flexShrink: 0,
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    color: inputBorderColor
-  };
-  const fileFieldStyle = {
-    width: "100%",
-    boxSizing: "border-box",
-    height: controlMetrics.height,
-    display: "flex",
-    alignItems: "center",
-    gap: 0,
-    overflow: "hidden",
-    borderRadius: STANDARD_COMPONENT_BORDER_RADIUS,
-    border: "none",
-    backgroundColor: theme.colors.surface,
-    color: theme.colors.text,
-    cursor: disabled ? "not-allowed" : "pointer",
-    opacity: disabled ? DISABLED_FIELD_OPACITY : 1,
-    padding: 0,
-    outline: "none",
-    boxShadow: adornedFieldShadow,
-    transition: "box-shadow 160ms ease, background-color 160ms ease",
-    textAlign: "left",
-    ...style
-  };
-  const fileSelectionStyle = {
-    flex: 1,
-    minWidth: 0,
-    height: "100%",
-    display: "flex",
-    alignItems: "center",
-    padding: 0,
-    border: "none",
-    backgroundColor: "transparent",
-    textAlign: "left",
-    cursor: disabled ? "not-allowed" : "pointer",
-    appearance: "none"
-  };
-  const fileSelectionTextStyle = {
-    flex: 1,
-    display: "flex",
-    alignItems: "center",
-    height: "100%",
-    minWidth: 0,
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap",
-    color: selectedFileNames.length === 0 ? inputPlaceholderColor : theme.colors.text,
-    fontSize: controlMetrics.fontSize,
-    lineHeight: controlMetrics.lineHeight,
-    padding: `0 ${controlMetrics.paddingX}px 0 ${leadingContentGap}px`
-  };
-  const emailFieldStyle = {
-    width: "100%",
-    boxSizing: "border-box",
-    height: controlMetrics.height,
-    display: "flex",
-    alignItems: "center",
-    gap: 0,
-    overflow: "hidden",
-    borderRadius: STANDARD_COMPONENT_BORDER_RADIUS,
-    border: "none",
-    backgroundColor: theme.colors.surface,
-    color: theme.colors.text,
-    cursor: disabled ? "not-allowed" : "text",
-    opacity: disabled ? DISABLED_FIELD_OPACITY : 1,
-    padding: 0,
-    outline: "none",
-    boxShadow: adornedFieldShadow,
-    transition: "box-shadow 160ms ease, background-color 160ms ease",
-    textAlign: "left",
-    ...style
-  };
-  const emailAdornmentStyle = {
-    flexShrink: 0,
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    alignSelf: "stretch",
-    boxSizing: "border-box",
-    width: emailAdornmentWidth,
-    backgroundColor: "transparent",
-    color: inputBorderColor
-  };
-  const emailInputStyle = {
-    flex: 1,
-    minWidth: 0,
-    height: "100%",
-    boxSizing: "border-box",
-    border: "none",
-    backgroundColor: "transparent",
-    color: theme.colors.text,
-    cursor: disabled ? "not-allowed" : "text",
-    padding: `0 ${controlMetrics.paddingX}px 0 ${leadingContentGap}px`,
-    outline: "none",
-    fontSize: controlMetrics.fontSize,
-    lineHeight: controlMetrics.lineHeight
-  };
-  const passwordFieldStyle = {
-    ...emailFieldStyle
-  };
-  const passwordToggleStyle = {
-    border: "none",
-    ...emailAdornmentStyle,
-    width: passwordAdornmentWidth,
-    padding: 0,
-    cursor: disabled ? "not-allowed" : "pointer",
-    appearance: "none"
-  };
-  const passwordInputStyle = {
-    ...emailInputStyle
-  };
+  const fieldBorderColor = error ? "var(--theme-negative)" : "var(--theme-textLight)";
+  const fieldBaseClassName = cx(
+    "w-full box-border rounded-2xl border border-solid bg-[var(--theme-surface)]",
+    "text-[var(--theme-text)] outline-none transition-[border-color,box-shadow,background-color]",
+    "duration-150 placeholder:text-[var(--ui-kit-placeholder)]",
+    FIELD_HEIGHT_CLASSNAMES[controlSize],
+    FIELD_TEXT_CLASSNAMES[controlSize],
+    error ? "border-[var(--theme-negative)]" : "border-[var(--theme-textLight)]",
+    disabled ? "cursor-not-allowed opacity-70" : "cursor-text"
+  );
+  const adornedFieldClassName = cx(
+    "box-border flex w-full items-center gap-0 overflow-hidden rounded-2xl",
+    "bg-[var(--theme-surface)] text-[var(--theme-text)] text-left",
+    "transition-[border-color,box-shadow,background-color] duration-150",
+    FIELD_HEIGHT_CLASSNAMES[controlSize],
+    FIELD_TEXT_CLASSNAMES[controlSize],
+    disabled ? "opacity-70" : null
+  );
+  const adornedFieldBoxShadow = getInsetBorderShadow(fieldBorderColor);
+  const adornedInputClassName = cx(
+    "h-full min-w-0 flex-1 border-0 bg-transparent text-[var(--theme-text)] outline-none",
+    "placeholder:text-[var(--ui-kit-placeholder)]",
+    FIELD_TEXT_CLASSNAMES[controlSize],
+    disabled ? "cursor-not-allowed" : "cursor-text"
+  );
+  const adornmentColorClassName = error ? "text-[var(--theme-negative)]" : "text-[var(--theme-textLight)]";
   const openFilePicker = () => {
     var _a;
     if (disabled) {
@@ -1775,82 +1383,201 @@ function Input({
           setSelectedFileNames(Array.from((_a = event.target.files) != null ? _a : [], (file) => file.name));
           onChange == null ? void 0 : onChange(event);
         },
-        style: hiddenFileInputStyle
+        className: "hidden"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: fileFieldStyle, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-        "button",
-        {
-          type: "button",
-          disabled,
-          "aria-controls": inputId,
-          "aria-label": hasSelectedFiles ? rest.multiple ? "Remove selected files" : "Remove selected file" : rest.multiple ? "Select files" : "Select file",
-          onClick: hasSelectedFiles ? clearSelectedFiles : openFilePicker,
-          style: fileTriggerStyle,
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: fileIconStyle, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { width: fileIconSize, height: fileIconSize, viewBox: "0 0 20 20", fill: "none", children: hasSelectedFiles ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                "path",
-                {
-                  d: "M5.5 6.25h9",
-                  stroke: "currentColor",
-                  strokeWidth: "1.6",
-                  strokeLinecap: "round"
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                "path",
-                {
-                  d: "M7.25 6.25V5.25A1.5 1.5 0 0 1 8.75 3.75h2.5a1.5 1.5 0 0 1 1.5 1.5v1",
-                  stroke: "currentColor",
-                  strokeWidth: "1.6",
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round"
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                "path",
-                {
-                  d: "M7.75 8.25v5.5",
-                  stroke: "currentColor",
-                  strokeWidth: "1.6",
-                  strokeLinecap: "round"
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                "path",
-                {
-                  d: "M10 8.25v5.5",
-                  stroke: "currentColor",
-                  strokeWidth: "1.6",
-                  strokeLinecap: "round"
-                }
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      "div",
+      {
+        className: cx(
+          adornedFieldClassName,
+          disabled ? "cursor-not-allowed" : "cursor-pointer",
+          className
+        ),
+        style: { boxShadow: adornedFieldBoxShadow, ...style },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+            "button",
+            {
+              type: "button",
+              disabled,
+              "aria-controls": inputId,
+              "aria-label": hasSelectedFiles ? rest.multiple ? "Remove selected files" : "Remove selected file" : rest.multiple ? "Select files" : "Select file",
+              onClick: hasSelectedFiles ? clearSelectedFiles : openFilePicker,
+              className: cx(
+                "inline-flex shrink-0 self-stretch whitespace-nowrap border-0 bg-transparent",
+                "items-center text-[var(--theme-text)] appearance-none",
+                FIELD_TEXT_CLASSNAMES[controlSize],
+                disabled ? "cursor-not-allowed" : "cursor-pointer",
+                showUploadLabel ? "justify-start font-bold" : "justify-center"
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                "path",
-                {
-                  d: "M12.25 8.25v5.5",
-                  stroke: "currentColor",
-                  strokeWidth: "1.6",
-                  strokeLinecap: "round"
-                }
+              style: {
+                gap: showUploadLabel ? leadingContentGap : 0,
+                width: showUploadLabel ? void 0 : fileTriggerWidth,
+                padding: showUploadLabel ? `0 ${controlMetrics.buttonPaddingX}px 0 ${Math.max(8, Math.round(controlMetrics.paddingX / 2))}px` : 0
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  "span",
+                  {
+                    className: cx(
+                      "inline-flex shrink-0 items-center justify-center",
+                      adornmentColorClassName
+                    ),
+                    "aria-hidden": "true",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { width: fileIconSize, height: fileIconSize, viewBox: "0 0 20 20", fill: "none", children: hasSelectedFiles ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                        "path",
+                        {
+                          d: "M5.5 6.25h9",
+                          stroke: "currentColor",
+                          strokeWidth: "1.6",
+                          strokeLinecap: "round"
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                        "path",
+                        {
+                          d: "M7.25 6.25V5.25A1.5 1.5 0 0 1 8.75 3.75h2.5a1.5 1.5 0 0 1 1.5 1.5v1",
+                          stroke: "currentColor",
+                          strokeWidth: "1.6",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round"
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                        "path",
+                        {
+                          d: "M7.75 8.25v5.5",
+                          stroke: "currentColor",
+                          strokeWidth: "1.6",
+                          strokeLinecap: "round"
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                        "path",
+                        {
+                          d: "M10 8.25v5.5",
+                          stroke: "currentColor",
+                          strokeWidth: "1.6",
+                          strokeLinecap: "round"
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                        "path",
+                        {
+                          d: "M12.25 8.25v5.5",
+                          stroke: "currentColor",
+                          strokeWidth: "1.6",
+                          strokeLinecap: "round"
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                        "path",
+                        {
+                          d: "M6.75 6.25l.5 8a1.5 1.5 0 0 0 1.497 1.406h2.506A1.5 1.5 0 0 0 12.75 14.25l.5-8",
+                          stroke: "currentColor",
+                          strokeWidth: "1.6",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round"
+                        }
+                      )
+                    ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                        "path",
+                        {
+                          d: "M6.25 2.5h5.652l4.348 4.348V15A2.5 2.5 0 0 1 13.75 17.5h-7.5A2.5 2.5 0 0 1 3.75 15V5A2.5 2.5 0 0 1 6.25 2.5Z",
+                          stroke: "currentColor",
+                          strokeWidth: "1.6",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round"
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                        "path",
+                        {
+                          d: "M11.875 2.75V6.25H15.375",
+                          stroke: "currentColor",
+                          strokeWidth: "1.6",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round"
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                        "path",
+                        {
+                          d: "M7.5 10h5",
+                          stroke: "currentColor",
+                          strokeWidth: "1.6",
+                          strokeLinecap: "round"
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                        "path",
+                        {
+                          d: "M7.5 13h5",
+                          stroke: "currentColor",
+                          strokeWidth: "1.6",
+                          strokeLinecap: "round"
+                        }
+                      )
+                    ] }) })
+                  }
+                ),
+                showUploadLabel ? fileButtonLabel : null
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            "button",
+            {
+              type: "button",
+              disabled,
+              "aria-controls": inputId,
+              "aria-label": rest.multiple ? "Select files" : "Select file",
+              onClick: openFilePicker,
+              className: cx(
+                "flex h-full min-w-0 flex-1 items-center border-0 bg-transparent p-0",
+                "text-left appearance-none",
+                disabled ? "cursor-not-allowed" : "cursor-pointer"
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                "path",
+              children: fileSelectionText ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                "span",
                 {
-                  d: "M6.75 6.25l.5 8a1.5 1.5 0 0 0 1.497 1.406h2.506A1.5 1.5 0 0 0 12.75 14.25l.5-8",
-                  stroke: "currentColor",
-                  strokeWidth: "1.6",
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round"
+                  className: cx(
+                    "flex h-full min-w-0 flex-1 items-center overflow-hidden text-ellipsis whitespace-nowrap",
+                    FIELD_TEXT_CLASSNAMES[controlSize],
+                    hasSelectedFiles ? "text-[var(--theme-text)]" : "text-[var(--ui-kit-placeholder)]"
+                  ),
+                  style: { padding: `0 ${controlMetrics.paddingX}px 0 ${leadingContentGap}px` },
+                  children: fileSelectionText
                 }
-              )
-            ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+              ) : null
+            }
+          )
+        ]
+      }
+    )
+  ] }) : isEmailField ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    "div",
+    {
+      className: cx(adornedFieldClassName, className),
+      style: { boxShadow: adornedFieldBoxShadow, ...style },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "span",
+          {
+            className: cx(
+              "inline-flex shrink-0 self-stretch items-center justify-center bg-transparent",
+              adornmentColorClassName
+            ),
+            style: { width: emailAdornmentWidth },
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: fileIconSize, height: fileIconSize, viewBox: "0 0 20 20", fill: "none", children: [
               /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 "path",
                 {
-                  d: "M6.25 2.5h5.652l4.348 4.348V15A2.5 2.5 0 0 1 13.75 17.5h-7.5A2.5 2.5 0 0 1 3.75 15V5A2.5 2.5 0 0 1 6.25 2.5Z",
+                  d: "M3.75 6.25A1.875 1.875 0 0 1 5.625 4.375h8.75A1.875 1.875 0 0 1 16.25 6.25v7.5a1.875 1.875 0 0 1-1.875 1.875h-8.75A1.875 1.875 0 0 1 3.75 13.75v-7.5Z",
                   stroke: "currentColor",
                   strokeWidth: "1.6",
                   strokeLinecap: "round",
@@ -1860,165 +1587,160 @@ function Input({
               /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 "path",
                 {
-                  d: "M11.875 2.75V6.25H15.375",
+                  d: "M4.375 6.25 10 10.625l5.625-4.375",
                   stroke: "currentColor",
                   strokeWidth: "1.6",
                   strokeLinecap: "round",
                   strokeLinejoin: "round"
                 }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                "path",
-                {
-                  d: "M7.5 10h5",
-                  stroke: "currentColor",
-                  strokeWidth: "1.6",
-                  strokeLinecap: "round"
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                "path",
-                {
-                  d: "M7.5 13h5",
-                  stroke: "currentColor",
-                  strokeWidth: "1.6",
-                  strokeLinecap: "round"
-                }
               )
-            ] }) }) }),
-            showUploadLabel ? fileButtonLabel : null
-          ]
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        "button",
-        {
-          type: "button",
-          disabled,
-          "aria-controls": inputId,
-          "aria-label": rest.multiple ? "Select files" : "Select file",
-          onClick: openFilePicker,
-          style: fileSelectionStyle,
-          children: fileSelectionText ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: fileSelectionTextStyle, children: fileSelectionText }) : null
-        }
-      )
-    ] })
-  ] }) : isEmailField ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: emailFieldStyle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: emailAdornmentStyle, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: fileIconSize, height: fileIconSize, viewBox: "0 0 20 20", fill: "none", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        "path",
-        {
-          d: "M3.75 6.25A1.875 1.875 0 0 1 5.625 4.375h8.75A1.875 1.875 0 0 1 16.25 6.25v7.5a1.875 1.875 0 0 1-1.875 1.875h-8.75A1.875 1.875 0 0 1 3.75 13.75v-7.5Z",
-          stroke: "currentColor",
-          strokeWidth: "1.6",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        "path",
-        {
-          d: "M4.375 6.25 10 10.625l5.625-4.375",
-          stroke: "currentColor",
-          strokeWidth: "1.6",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        }
-      )
-    ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("input", { ...rest, id: inputId, placeholder, type: resolvedType, disabled, onChange, style: emailInputStyle })
-  ] }) : canTogglePasswordVisibility ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: passwordFieldStyle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      "button",
-      {
-        type: "button",
-        "aria-label": isPasswordVisible ? "Hide password" : "Show password",
-        "aria-pressed": isPasswordVisible,
-        disabled,
-        onMouseDown: (event) => {
-          event.preventDefault();
-        },
-        onClick: () => {
-          setIsPasswordVisible((currentValue) => !currentValue);
-        },
-        style: passwordToggleStyle,
-        children: isPasswordVisible ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-          "svg",
+            ] })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "input",
           {
-            width: passwordLockIconSize,
-            height: passwordLockIconSize,
-            viewBox: "0 0 20 20",
-            fill: "none",
-            "aria-hidden": "true",
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                "path",
-                {
-                  d: "M6.75 8V6.75A3.25 3.25 0 0 1 12.262 4.415",
-                  stroke: "currentColor",
-                  strokeWidth: "1.8",
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round"
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                "path",
-                {
-                  d: "M6 8.25h8a1.75 1.75 0 0 1 1.75 1.75V14A1.75 1.75 0 0 1 14 15.75H6A1.75 1.75 0 0 1 4.25 14V10A1.75 1.75 0 0 1 6 8.25Z",
-                  stroke: "currentColor",
-                  strokeWidth: "1.8",
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round"
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                "path",
-                {
-                  d: "M10 11.25v1.5",
-                  stroke: "currentColor",
-                  strokeWidth: "1.8",
-                  strokeLinecap: "round"
-                }
-              )
-            ]
+            ...rest,
+            id: inputId,
+            placeholder,
+            type: resolvedType,
+            disabled,
+            onChange,
+            className: cx(adornedInputClassName, className),
+            style: { padding: `0 ${controlMetrics.paddingX}px 0 ${leadingContentGap}px` }
+          }
+        )
+      ]
+    }
+  ) : canTogglePasswordVisibility ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    "div",
+    {
+      className: cx(adornedFieldClassName, className),
+      style: { boxShadow: adornedFieldBoxShadow, ...style },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "button",
+          {
+            type: "button",
+            "aria-label": isPasswordVisible ? "Hide password" : "Show password",
+            "aria-pressed": isPasswordVisible,
+            disabled,
+            onMouseDown: (event) => {
+              event.preventDefault();
+            },
+            onClick: () => {
+              setIsPasswordVisible((currentValue) => !currentValue);
+            },
+            className: cx(
+              "inline-flex shrink-0 self-stretch items-center justify-center border-0",
+              "bg-transparent p-0 appearance-none",
+              adornmentColorClassName,
+              disabled ? "cursor-not-allowed" : "cursor-pointer"
+            ),
+            style: { width: passwordAdornmentWidth },
+            children: isPasswordVisible ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+              "svg",
+              {
+                width: passwordLockIconSize,
+                height: passwordLockIconSize,
+                viewBox: "0 0 20 20",
+                fill: "none",
+                "aria-hidden": "true",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                    "path",
+                    {
+                      d: "M6.75 8V6.75A3.25 3.25 0 0 1 12.262 4.415",
+                      stroke: "currentColor",
+                      strokeWidth: "1.8",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                    "path",
+                    {
+                      d: "M6 8.25h8a1.75 1.75 0 0 1 1.75 1.75V14A1.75 1.75 0 0 1 14 15.75H6A1.75 1.75 0 0 1 4.25 14V10A1.75 1.75 0 0 1 6 8.25Z",
+                      stroke: "currentColor",
+                      strokeWidth: "1.8",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                    "path",
+                    {
+                      d: "M10 11.25v1.5",
+                      stroke: "currentColor",
+                      strokeWidth: "1.8",
+                      strokeLinecap: "round"
+                    }
+                  )
+                ]
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+              "svg",
+              {
+                width: passwordLockIconSize,
+                height: passwordLockIconSize,
+                viewBox: "0 0 20 20",
+                fill: "none",
+                "aria-hidden": "true",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                    "path",
+                    {
+                      d: "M6.75 8V6.75A3.25 3.25 0 1 1 13.25 6.75V8",
+                      stroke: "currentColor",
+                      strokeWidth: "1.8",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                    "path",
+                    {
+                      d: "M6 8.25h8a1.75 1.75 0 0 1 1.75 1.75V14A1.75 1.75 0 0 1 14 15.75H6A1.75 1.75 0 0 1 4.25 14V10A1.75 1.75 0 0 1 6 8.25Z",
+                      stroke: "currentColor",
+                      strokeWidth: "1.8",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M10 11.25v1.5", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" })
+                ]
+              }
+            )
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-          "svg",
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "input",
           {
-            width: passwordLockIconSize,
-            height: passwordLockIconSize,
-            viewBox: "0 0 20 20",
-            fill: "none",
-            "aria-hidden": "true",
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                "path",
-                {
-                  d: "M6.75 8V6.75A3.25 3.25 0 1 1 13.25 6.75V8",
-                  stroke: "currentColor",
-                  strokeWidth: "1.8",
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round"
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                "path",
-                {
-                  d: "M6 8.25h8a1.75 1.75 0 0 1 1.75 1.75V14A1.75 1.75 0 0 1 14 15.75H6A1.75 1.75 0 0 1 4.25 14V10A1.75 1.75 0 0 1 6 8.25Z",
-                  stroke: "currentColor",
-                  strokeWidth: "1.8",
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round"
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M10 11.25v1.5", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" })
-            ]
+            ...rest,
+            id: inputId,
+            placeholder,
+            type: resolvedType,
+            disabled,
+            onChange,
+            className: cx(adornedInputClassName, className),
+            style: { padding: `0 ${controlMetrics.paddingX}px 0 ${leadingContentGap}px` }
           }
         )
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("input", { ...rest, id: inputId, placeholder, type: resolvedType, disabled, onChange, style: passwordInputStyle })
-  ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("input", { ...rest, id: inputId, placeholder, type: resolvedType, disabled, onChange, style: inputStyle });
+      ]
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "input",
+    {
+      ...rest,
+      id: inputId,
+      placeholder,
+      type: resolvedType,
+      disabled,
+      onChange,
+      className: cx(fieldBaseClassName, FIELD_PADDING_X_CLASSNAMES[controlSize], className),
+      style: { boxShadow: "var(--ui-kit-component-shadow)", ...style }
+    }
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     ControlFrame,
     {
@@ -2082,20 +1804,35 @@ var ACCESSORY_METRICS_BY_SIZE = {
     contentGap: 8
   },
   md: {
+    buttonSize: 19,
+    iconSize: 15,
+    rightOffset: 9,
+    clusterGap: 7,
+    contentGap: 9
+  },
+  lg: {
     buttonSize: 20,
     iconSize: 16,
     rightOffset: 10,
     clusterGap: 8,
     contentGap: 10
-  },
-  lg: {
-    buttonSize: 22,
-    iconSize: 18,
-    rightOffset: 12,
-    clusterGap: 8,
-    contentGap: 12
   }
 };
+var FIELD_HEIGHT_CLASSNAMES2 = {
+  sm: "h-[30px]",
+  md: "h-[34px]",
+  lg: "h-[38px]"
+};
+var FIELD_TEXT_CLASSNAMES2 = {
+  sm: "text-[13px] leading-4",
+  md: "text-sm leading-[18px]",
+  lg: "text-[15px] leading-[18px]"
+};
+var FIELD_PADDING_X_CLASSNAMES2 = {
+  sm: "px-3",
+  md: "px-[14px]",
+  lg: "px-4"
+};
 function padNumber(value, length = 2) {
   return String(value).padStart(length, "0");
 }
@@ -2279,13 +2016,13 @@ function DatePicker({
   ...rest
 }) {
   var _a;
-  const { theme, focusRing } = useUiKitTheme();
+  useUiKitTheme();
   const controlMetrics = getControlMetrics(controlSize);
   const accessoryMetrics = ACCESSORY_METRICS_BY_SIZE[controlSize];
-  const generatedIdRef = (0, import_react7.useRef)();
-  const visibleInputRef = (0, import_react7.useRef)(null);
-  const nativeInputRef = (0, import_react7.useRef)(null);
-  const [internalError, setInternalError] = (0, import_react7.useState)();
+  const generatedIdRef = (0, import_react6.useRef)();
+  const visibleInputRef = (0, import_react6.useRef)(null);
+  const nativeInputRef = (0, import_react6.useRef)(null);
+  const [internalError, setInternalError] = (0, import_react6.useState)();
   const resolvedFormat = (format == null ? void 0 : format.trim()) ? format : DEFAULT_FORMAT_BY_MODE[mode];
   const isControlled = value !== void 0;
   const nativePickerType = mode === "datetime" ? "datetime-local" : "date";
@@ -2293,23 +2030,23 @@ function DatePicker({
     generatedIdRef.current = `ss-date-picker-${Math.random().toString(36).slice(2, 10)}`;
   }
   const resolvedId = id != null ? id : generatedIdRef.current;
-  const normalizedDefaultValue = (0, import_react7.useMemo)(() => {
+  const normalizedDefaultValue = (0, import_react6.useMemo)(() => {
     const parsedDefaultValue = parseDateValue(defaultValue, mode, resolvedFormat);
     return parsedDefaultValue ? toLocalInputValue(parsedDefaultValue, mode) : null;
   }, [defaultValue, mode, resolvedFormat]);
-  const [uncontrolledValue, setUncontrolledValue] = (0, import_react7.useState)(normalizedDefaultValue);
-  const committedDate = (0, import_react7.useMemo)(() => {
+  const [uncontrolledValue, setUncontrolledValue] = (0, import_react6.useState)(normalizedDefaultValue);
+  const committedDate = (0, import_react6.useMemo)(() => {
     const sourceValue = isControlled ? value : uncontrolledValue;
     return parseDateValue(sourceValue, mode, resolvedFormat);
   }, [isControlled, mode, resolvedFormat, uncontrolledValue, value]);
   const committedValue = committedDate ? toLocalInputValue(committedDate, mode) : null;
   const committedDisplayValue = committedDate ? formatDateValue(committedDate, resolvedFormat) : "";
-  const [draftValue, setDraftValue] = (0, import_react7.useState)(committedDisplayValue);
-  (0, import_react7.useEffect)(() => {
+  const [draftValue, setDraftValue] = (0, import_react6.useState)(committedDisplayValue);
+  (0, import_react6.useEffect)(() => {
     setDraftValue(committedDisplayValue);
     setInternalError(void 0);
   }, [committedDisplayValue]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (!isControlled) {
       setUncontrolledValue((currentValue) => {
         if (currentValue == null) {
@@ -2320,12 +2057,12 @@ function DatePicker({
       });
     }
   }, [isControlled, mode, resolvedFormat]);
-  const parsedMinDate = (0, import_react7.useMemo)(() => {
+  const parsedMinDate = (0, import_react6.useMemo)(() => {
     const explicitMinDate = parseDateValue(minDate, mode, resolvedFormat);
     const guardedMinDate = allowPastDates ? null : normalizeDatePrecision(/* @__PURE__ */ new Date(), mode);
     return getLaterDate(explicitMinDate, guardedMinDate);
   }, [allowPastDates, minDate, mode, resolvedFormat]);
-  const parsedMaxDate = (0, import_react7.useMemo)(() => {
+  const parsedMaxDate = (0, import_react6.useMemo)(() => {
     const explicitMaxDate = parseDateValue(maxDate, mode, resolvedFormat);
     const guardedMaxDate = allowFutureDates ? null : normalizeDatePrecision(/* @__PURE__ */ new Date(), mode);
     return getEarlierDate(explicitMaxDate, guardedMaxDate);
@@ -2335,7 +2072,6 @@ function DatePicker({
   const derivedError = hasConfigurationConflict ? "Current date rules do not allow any selection." : internalError;
   const resolvedError = hasExternalError ? error : derivedError;
   const hasAnyValue = draftValue.trim().length > 0 || Boolean(committedValue);
-  const inputBorderColor = resolvedError ? theme.colors.negative : theme.colors.textLight;
   const showPickerAdornment = showPickerButton;
   const canOpenPicker = !disabled && !readOnly && !hasConfigurationConflict;
   const canClear = clearable && !disabled && !readOnly && !required && hasAnyValue;
@@ -2346,6 +2082,42 @@ function DatePicker({
     0,
     accessoryMetrics.rightOffset + trailingButtonCount * accessoryMetrics.buttonSize + (trailingButtonCount - 1) * accessoryMetrics.clusterGap + accessoryMetrics.contentGap - controlMetrics.paddingX
   ) : 0;
+  const fieldBorderColor = resolvedError ? "var(--theme-negative)" : "var(--theme-textLight)";
+  const fieldBaseClassName = cx(
+    "w-full box-border rounded-2xl border border-solid bg-[var(--theme-surface)]",
+    "text-[var(--theme-text)] outline-none transition-[border-color,box-shadow,background-color]",
+    "duration-150 placeholder:text-[var(--ui-kit-placeholder)]",
+    FIELD_HEIGHT_CLASSNAMES2[controlSize],
+    FIELD_TEXT_CLASSNAMES2[controlSize],
+    resolvedError ? "border-[var(--theme-negative)]" : "border-[var(--theme-textLight)]",
+    disabled ? "cursor-not-allowed opacity-70" : readOnly ? "cursor-default" : "cursor-text"
+  );
+  const integratedFieldClassName = cx(
+    "box-border flex w-full items-center gap-0 overflow-hidden rounded-2xl",
+    "bg-[var(--theme-surface)] text-[var(--theme-text)]",
+    "transition-[border-color,box-shadow,background-color] duration-150",
+    FIELD_HEIGHT_CLASSNAMES2[controlSize],
+    FIELD_TEXT_CLASSNAMES2[controlSize],
+    disabled ? "cursor-not-allowed opacity-70" : readOnly ? "cursor-default" : "cursor-text"
+  );
+  const integratedFieldBoxShadow = getInsetBorderShadow(fieldBorderColor, resolvedError ? { outerShadow: "0 0 0 3px var(--ui-kit-negative-soft)" } : void 0);
+  const integratedInputClassName = cx(
+    "h-full w-full box-border border-0 bg-transparent text-[var(--theme-text)]",
+    "outline-none placeholder:text-[var(--ui-kit-placeholder)]",
+    FIELD_TEXT_CLASSNAMES2[controlSize],
+    disabled ? "cursor-not-allowed" : readOnly ? "cursor-default" : "cursor-text"
+  );
+  const pickerAdornmentClassName = cx(
+    "inline-flex shrink-0 self-stretch items-center justify-center border-0",
+    "bg-transparent p-0 appearance-none",
+    resolvedError ? "text-[var(--theme-negative)]" : "text-[var(--theme-textLight)]",
+    disabled || readOnly || hasConfigurationConflict ? "cursor-not-allowed" : "cursor-pointer"
+  );
+  const accessoryButtonClassName = cx(
+    "m-0 inline-flex shrink-0 items-center justify-center rounded-full border-0 bg-transparent p-0 leading-none",
+    "text-[var(--theme-textLight)]",
+    disabled ? "cursor-not-allowed opacity-70" : readOnly ? "cursor-not-allowed" : "cursor-pointer"
+  );
   const getValidationMessage = (parsedDate) => {
     if (parsedMinDate && parsedDate.getTime() < parsedMinDate.getTime()) {
       return `Choose a value on or after ${formatDateValue(parsedMinDate, resolvedFormat)}.`;
@@ -2442,98 +2214,10 @@ function DatePicker({
       (_b = visibleInputRef.current) == null ? void 0 : _b.focus();
     }
   };
-  const inputStyle = {
-    width: "100%",
-    boxSizing: "border-box",
-    height: controlMetrics.height,
-    borderRadius: STANDARD_COMPONENT_BORDER_RADIUS,
-    border: `1px solid ${inputBorderColor}`,
-    backgroundColor: theme.colors.surface,
-    color: theme.colors.text,
-    cursor: disabled ? "not-allowed" : readOnly ? "default" : "text",
-    opacity: disabled ? DISABLED_FIELD_OPACITY : 1,
-    padding: getTextInputPadding(controlSize, { trailingInset }),
-    outline: "none",
-    fontSize: controlMetrics.fontSize,
-    lineHeight: controlMetrics.lineHeight,
-    boxShadow: resolvedError ? `0 0 0 3px ${withAlpha(theme.colors.negative, 0.12)}, ${getComponentShadow(theme)}` : `${getComponentShadow(theme)}, 0 0 0 0 ${focusRing}`,
-    transition: FIELD_SURFACE_TRANSITION,
-    ...style
-  };
-  const integratedFieldStyle = {
-    width: "100%",
-    boxSizing: "border-box",
-    height: controlMetrics.height,
-    display: "flex",
-    alignItems: "center",
-    gap: 0,
-    overflow: "hidden",
-    borderRadius: STANDARD_COMPONENT_BORDER_RADIUS,
-    border: `1px solid ${inputBorderColor}`,
-    backgroundColor: theme.colors.surface,
-    color: theme.colors.text,
-    cursor: disabled ? "not-allowed" : readOnly ? "default" : "text",
-    opacity: disabled ? DISABLED_FIELD_OPACITY : 1,
-    padding: 0,
-    outline: "none",
-    boxShadow: resolvedError ? `0 0 0 3px ${withAlpha(theme.colors.negative, 0.12)}, ${getComponentShadow(theme)}` : `${getComponentShadow(theme)}, 0 0 0 0 ${focusRing}`,
-    transition: FIELD_SURFACE_TRANSITION,
-    ...style
-  };
-  const pickerSegmentStyle = {
-    flexShrink: 0,
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    alignSelf: "stretch",
-    boxSizing: "border-box",
-    width: pickerAdornmentWidth,
-    border: "none",
-    backgroundColor: "transparent",
-    color: inputBorderColor,
-    cursor: disabled || readOnly || hasConfigurationConflict ? "not-allowed" : "pointer",
-    padding: 0,
-    appearance: "none"
-  };
-  const integratedInputWrapStyle = {
-    position: "relative",
-    flex: 1,
-    minWidth: 0,
-    height: "100%"
-  };
-  const integratedTextInputStyle = {
-    width: "100%",
-    height: "100%",
-    boxSizing: "border-box",
-    border: "none",
-    backgroundColor: "transparent",
-    color: theme.colors.text,
-    cursor: disabled ? "not-allowed" : readOnly ? "default" : "text",
-    padding: `${controlMetrics.paddingY}px ${controlMetrics.paddingX + trailingInset}px ${controlMetrics.paddingY}px ${leadingContentGap}px`,
-    outline: "none",
-    fontSize: controlMetrics.fontSize,
-    lineHeight: controlMetrics.lineHeight
-  };
-  const accessoryButtonStyle = {
-    width: accessoryMetrics.buttonSize,
-    height: accessoryMetrics.buttonSize,
-    border: "none",
-    padding: 0,
-    margin: 0,
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    borderRadius: 999,
-    backgroundColor: "transparent",
-    color: theme.colors.textLight,
-    cursor: disabled || readOnly ? "not-allowed" : "pointer",
-    opacity: disabled ? DISABLED_FIELD_OPACITY : 1
-  };
   const visibleInputProps = {
     ...rest,
     ref: visibleInputRef,
     id: resolvedId,
-    className,
     type: "text",
     value: draftValue,
     disabled,
@@ -2595,33 +2279,14 @@ function DatePicker({
       onChange: (event) => {
         commitValue(event.target.value || null, "picker");
       },
-      style: {
-        position: "absolute",
-        width: 1,
-        height: 1,
-        padding: 0,
-        margin: -1,
-        overflow: "hidden",
-        clip: "rect(0, 0, 0, 0)",
-        whiteSpace: "nowrap",
-        border: 0,
-        opacity: 0,
-        pointerEvents: "none"
-      }
+      className: "ui-kit-sr-only pointer-events-none opacity-0"
     }
   );
   const clearButtonCluster = canClear ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "div",
     {
-      style: {
-        position: "absolute",
-        top: "50%",
-        right: accessoryMetrics.rightOffset,
-        transform: "translateY(-50%)",
-        display: "inline-flex",
-        alignItems: "center",
-        gap: accessoryMetrics.clusterGap
-      },
+      className: "absolute inset-y-0 inline-flex items-center",
+      style: { right: accessoryMetrics.rightOffset, gap: accessoryMetrics.clusterGap },
       children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         "button",
         {
@@ -2636,34 +2301,66 @@ function DatePicker({
             commitValue(null, "clear");
             (_a2 = visibleInputRef.current) == null ? void 0 : _a2.focus();
           },
-          style: accessoryButtonStyle,
+          className: accessoryButtonClassName,
+          style: { width: accessoryMetrics.buttonSize, height: accessoryMetrics.buttonSize },
           children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ClearIcon, { size: accessoryMetrics.iconSize })
         }
       )
     }
   ) : null;
-  const input = showPickerAdornment ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: integratedFieldStyle, children: [
+  const input = showPickerAdornment ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    "div",
+    {
+      className: cx(integratedFieldClassName, className),
+      style: {
+        boxShadow: integratedFieldBoxShadow,
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "button",
+          {
+            type: "button",
+            "aria-label": pickerButtonLabel != null ? pickerButtonLabel : mode === "datetime" ? "Open date and time picker" : "Open date picker",
+            disabled: !canOpenPicker,
+            onMouseDown: (event) => {
+              event.preventDefault();
+            },
+            onClick: openNativePicker,
+            className: pickerAdornmentClassName,
+            style: { width: pickerAdornmentWidth },
+            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CalendarIcon, { size: accessoryMetrics.iconSize })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "relative h-full min-w-0 flex-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "input",
+            {
+              ...visibleInputProps,
+              className: cx(integratedInputClassName, className),
+              style: {
+                padding: `${controlMetrics.paddingY}px ${controlMetrics.paddingX + trailingInset}px ${controlMetrics.paddingY}px ${leadingContentGap}px`
+              }
+            }
+          ),
+          nativePickerInput,
+          clearButtonCluster
+        ] })
+      ]
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "relative w-full", children: [
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-      "button",
+      "input",
       {
-        type: "button",
-        "aria-label": pickerButtonLabel != null ? pickerButtonLabel : mode === "datetime" ? "Open date and time picker" : "Open date picker",
-        disabled: !canOpenPicker,
-        onMouseDown: (event) => {
-          event.preventDefault();
-        },
-        onClick: openNativePicker,
-        style: pickerSegmentStyle,
-        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CalendarIcon, { size: accessoryMetrics.iconSize })
+        ...visibleInputProps,
+        className: cx(fieldBaseClassName, FIELD_PADDING_X_CLASSNAMES2[controlSize], className),
+        style: {
+          paddingRight: controlMetrics.paddingX + trailingInset,
+          boxShadow: resolvedError ? "0 0 0 3px var(--ui-kit-negative-soft), var(--ui-kit-component-shadow)" : "var(--ui-kit-component-shadow)",
+          ...style
+        }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: integratedInputWrapStyle, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("input", { ...visibleInputProps, style: integratedTextInputStyle }),
-      nativePickerInput,
-      clearButtonCluster
-    ] })
-  ] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { position: "relative", width: "100%" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("input", { ...visibleInputProps, style: inputStyle }),
     nativePickerInput,
     clearButtonCluster
   ] });
@@ -2686,27 +2383,38 @@ function Separator({
   orientation = "vertical",
   color,
   size = "100%",
+  className,
   style,
   ...rest
 }) {
-  const { theme } = useUiKitTheme();
+  useUiKitTheme();
   const usesVerticalStretch = orientation === "vertical" && size === "100%";
   const separatorStyle = {
-    flexShrink: 0,
-    alignSelf: "stretch",
-    backgroundColor: color != null ? color : theme.colors.text,
+    backgroundColor: color,
     width: orientation === "vertical" ? 1 : size,
     height: orientation === "vertical" ? usesVerticalStretch ? "auto" : size : 1,
     ...style
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { ...rest, role: "separator", "aria-orientation": orientation, style: separatorStyle });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "div",
+    {
+      ...rest,
+      role: "separator",
+      "aria-orientation": orientation,
+      className: cx(
+        "shrink-0 self-stretch bg-[var(--theme-text)]",
+        className
+      ),
+      style: separatorStyle
+    }
+  );
 }
 
 // src/componentsBase/select/SelectBase.tsx
-var import_react9 = require("react");
+var import_react8 = require("react");
 
 // src/componentsBase/select/utils.ts
-var import_react8 = require("react");
+var import_react7 = require("react");
 function getTextContent(node) {
   if (node == null || typeof node === "boolean") {
     return "";
@@ -2717,7 +2425,7 @@ function getTextContent(node) {
   if (Array.isArray(node)) {
     return node.map(getTextContent).join("");
   }
-  if ((0, import_react8.isValidElement)(node)) {
+  if ((0, import_react7.isValidElement)(node)) {
     return getTextContent(node.props.children);
   }
   return "";
@@ -2755,10 +2463,20 @@ function filterSelectGroups(groups, query) {
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var MENU_OFFSET = 8;
 var MENU_MAX_HEIGHT = 280;
-var getOptionPadding = (size) => {
-  if (size === "sm") return "8px 11px";
-  if (size === "lg") return "12px 15px";
-  return "10px 13px";
+var FIELD_HEIGHT_CLASSNAMES3 = {
+  sm: "h-[30px]",
+  md: "h-[34px]",
+  lg: "h-[38px]"
+};
+var FIELD_TEXT_CLASSNAMES3 = {
+  sm: "text-[13px] leading-4",
+  md: "text-sm leading-[18px]",
+  lg: "text-[15px] leading-[18px]"
+};
+var OPTION_PADDING_CLASSNAMES = {
+  sm: "px-[11px] py-2",
+  md: "px-3 py-[9px]",
+  lg: "px-[13px] py-[10px]"
 };
 function SelectBase({
   label,
@@ -2798,9 +2516,9 @@ function SelectBase({
   ...rest
 }) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i;
-  const { theme, mutedText, surfaceRaised } = useUiKitTheme();
+  const { theme, mutedText } = useUiKitTheme();
   const componentShadow = getComponentShadow(theme);
-  const generatedId = (0, import_react9.useId)().replace(/:/g, "");
+  const generatedId = (0, import_react8.useId)().replace(/:/g, "");
   const resolvedId = id != null ? id : `ss-select-${generatedId}`;
   const isMultiSelect = Boolean(isMulti || multiple);
   const hasFilter = Boolean(isFilterable);
@@ -2808,18 +2526,18 @@ function SelectBase({
   const enabledOptions = flatOptions.filter((option) => !option.disabled);
   const isControlled = value !== void 0;
   const fallbackValues = defaultValue !== void 0 ? normalizeSelectValues(defaultValue) : isMultiSelect ? [] : placeholder != null ? [] : ((_a = enabledOptions[0]) == null ? void 0 : _a.value) ? [enabledOptions[0].value] : [];
-  const [uncontrolledValues, setUncontrolledValues] = (0, import_react9.useState)(fallbackValues);
-  const [isOpen, setIsOpen] = (0, import_react9.useState)(false);
-  const [uncontrolledSearchQuery, setUncontrolledSearchQuery] = (0, import_react9.useState)("");
-  const [menuPlacement, setMenuPlacement] = (0, import_react9.useState)("bottom");
-  const [isPlacementResolved, setIsPlacementResolved] = (0, import_react9.useState)(false);
-  const [highlightedValue, setHighlightedValue] = (0, import_react9.useState)((_d = (_c = fallbackValues[0]) != null ? _c : (_b = enabledOptions[0]) == null ? void 0 : _b.value) != null ? _d : "");
-  const shellRef = (0, import_react9.useRef)(null);
-  const buttonRef = (0, import_react9.useRef)(null);
-  const menuRef = (0, import_react9.useRef)(null);
-  const searchInputRef = (0, import_react9.useRef)(null);
-  const hiddenSelectRef = (0, import_react9.useRef)(null);
-  const highlightSyncKeyRef = (0, import_react9.useRef)("");
+  const [uncontrolledValues, setUncontrolledValues] = (0, import_react8.useState)(fallbackValues);
+  const [isOpen, setIsOpen] = (0, import_react8.useState)(false);
+  const [uncontrolledSearchQuery, setUncontrolledSearchQuery] = (0, import_react8.useState)("");
+  const [menuPlacement, setMenuPlacement] = (0, import_react8.useState)("bottom");
+  const [isPlacementResolved, setIsPlacementResolved] = (0, import_react8.useState)(false);
+  const [highlightedValue, setHighlightedValue] = (0, import_react8.useState)((_d = (_c = fallbackValues[0]) != null ? _c : (_b = enabledOptions[0]) == null ? void 0 : _b.value) != null ? _d : "");
+  const shellRef = (0, import_react8.useRef)(null);
+  const buttonRef = (0, import_react8.useRef)(null);
+  const menuRef = (0, import_react8.useRef)(null);
+  const searchInputRef = (0, import_react8.useRef)(null);
+  const hiddenSelectRef = (0, import_react8.useRef)(null);
+  const highlightSyncKeyRef = (0, import_react8.useRef)("");
   const currentSearchQuery = searchQuery !== void 0 ? searchQuery : uncontrolledSearchQuery;
   const selectedValues = isControlled ? normalizeSelectValues(value) : uncontrolledValues;
   const selectedValue = (_e = selectedValues[0]) != null ? _e : "";
@@ -2845,13 +2563,49 @@ function SelectBase({
   const scrollbarThumbColor = withAlpha(theme.colors.text, 0.22);
   const scrollbarThumbHoverColor = withAlpha(theme.colors.text, 0.32);
   const highlightedOption = (_i = visibleOptions.find((option) => option.value === highlightedValue)) != null ? _i : null;
-  const optionHoverBackground = withAlpha(theme.colors.primary, 1);
-  const optionSelectedBackground = withAlpha(theme.colors.primary, 1);
+  const optionHoverBackground = theme.colors.primary;
+  const optionSelectedBackground = theme.colors.primary;
   const canOpenMenu = allowOpenWithoutOptions || flatOptions.length > 0;
   const buttonPassthroughProps = Object.fromEntries(
     Object.entries(rest).filter(([key]) => key.startsWith("aria-") || key.startsWith("data-"))
   );
-  (0, import_react9.useEffect)(() => {
+  const selectVariables = (0, import_react8.useMemo)(() => ({
+    "--ui-kit-select-placeholder": placeholderTextColor,
+    "--ui-kit-select-muted": mutedText,
+    "--ui-kit-select-indicator-disabled": withAlpha(theme.colors.text, 0.42),
+    "--ui-kit-select-surface-raised": theme.colors.surface,
+    "--ui-kit-select-scrollbar-thumb": scrollbarThumbColor,
+    "--ui-kit-select-scrollbar-thumb-hover": scrollbarThumbHoverColor,
+    "--ui-kit-select-divider": withAlpha(theme.colors.text, 0.08),
+    "--ui-kit-select-option-hover-bg": optionHoverBackground,
+    "--ui-kit-select-option-selected-bg": optionSelectedBackground,
+    "--ui-kit-select-option-disabled": withAlpha(theme.colors.text, 0.38),
+    "--ui-kit-select-control-shadow": componentShadow
+  }), [
+    componentShadow,
+    mutedText,
+    optionHoverBackground,
+    optionSelectedBackground,
+    placeholderTextColor,
+    scrollbarThumbColor,
+    scrollbarThumbHoverColor,
+    theme.colors.surface,
+    theme.colors.text
+  ]);
+  const triggerBorderColor = error ? "var(--theme-negative)" : "var(--theme-textLight)";
+  const triggerBoxShadow = getInsetBorderShadow(triggerBorderColor, {
+    componentShadow: "var(--ui-kit-select-control-shadow)"
+  });
+  const triggerClassName = cx(
+    "m-0 box-border flex w-full min-w-0 items-center justify-between gap-3 rounded-2xl border-0 appearance-none",
+    "bg-[var(--theme-surface)] outline-none transition-[border-color,box-shadow,background-color]",
+    "duration-150 text-left",
+    FIELD_HEIGHT_CLASSNAMES3[controlSize],
+    FIELD_TEXT_CLASSNAMES3[controlSize],
+    hasSelection ? "text-[var(--theme-text)]" : "text-[var(--ui-kit-select-placeholder)]",
+    disabled ? "cursor-not-allowed opacity-70" : "cursor-pointer"
+  );
+  (0, import_react8.useEffect)(() => {
     var _a2, _b2, _c2, _d2;
     if (isControlled || preserveUnknownValues) {
       return;
@@ -2868,7 +2622,7 @@ function SelectBase({
     setUncontrolledValues(nextValues);
     setHighlightedValue((_d2 = (_c2 = nextValues[0]) != null ? _c2 : (_b2 = enabledOptions[0]) == null ? void 0 : _b2.value) != null ? _d2 : "");
   }, [defaultValue, enabledOptions, flatOptions, isControlled, isMultiSelect, preserveUnknownValues, uncontrolledValues]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     var _a2, _b2, _c2;
     if (!isOpen) {
       highlightSyncKeyRef.current = "";
@@ -2884,14 +2638,14 @@ function SelectBase({
     const nextHighlightedValue = (_c2 = (_b2 = [...selectedValues].reverse().find((currentValue) => visibleEnabledValues.includes(currentValue))) != null ? _b2 : (_a2 = visibleEnabledOptions[0]) == null ? void 0 : _a2.value) != null ? _c2 : "";
     setHighlightedValue(nextHighlightedValue);
   }, [isOpen, selectedValuesKey, visibleEnabledValuesKey, selectedValues, visibleEnabledOptions, visibleEnabledValues]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     var _a2;
     if (!isOpen || !hasFilter) {
       return;
     }
     (_a2 = searchInputRef.current) == null ? void 0 : _a2.focus();
   }, [hasFilter, isOpen]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (!isOpen) {
       return;
     }
@@ -2916,7 +2670,7 @@ function SelectBase({
       window.cancelAnimationFrame(frameId);
     };
   }, [isOpen, visibleOptions.length]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (isOpen || !clearSearchOnClose || currentSearchQuery === "") {
       return;
     }
@@ -2925,7 +2679,7 @@ function SelectBase({
     }
     onSearchQueryChange == null ? void 0 : onSearchQueryChange("");
   }, [clearSearchOnClose, currentSearchQuery, isOpen, onSearchQueryChange, searchQuery]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (!isOpen) {
       return;
     }
@@ -2941,7 +2695,7 @@ function SelectBase({
       document.removeEventListener("pointerdown", handlePointerDown);
     };
   }, [isOpen]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     var _a2;
     if (isControlled) {
       return;
@@ -3056,20 +2810,10 @@ function SelectBase({
         event.stopPropagation();
         toggleVisibleSelection(!hasAllVisibleSelected);
       },
-      style: {
-        width: 20,
-        height: 20,
-        padding: 0,
-        margin: 0,
-        display: "inline-flex",
-        alignItems: "center",
-        justifyContent: "center",
-        flexShrink: 0,
-        border: "none",
-        background: "transparent",
-        cursor: canToggleVisibleSelection ? "pointer" : "not-allowed",
-        opacity: canToggleVisibleSelection ? 1 : 0.45
-      },
+      className: cx(
+        "m-0 inline-flex h-5 w-5 shrink-0 items-center justify-center border-0 bg-transparent p-0",
+        canToggleVisibleSelection ? "cursor-pointer opacity-100" : "cursor-not-allowed opacity-45"
+      ),
       children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         CheckboxIndicator,
         {
@@ -3223,7 +2967,7 @@ function SelectBase({
       htmlFor: resolvedId,
       required: rest.required,
       useLabelWrapper: false,
-      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { ref: shellRef, style: { position: "relative", width: "100%" }, children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { ref: shellRef, className: "relative w-full", style: selectVariables, children: [
         /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
           "button",
           {
@@ -3231,7 +2975,7 @@ function SelectBase({
             id: resolvedId,
             ref: buttonRef,
             type: "button",
-            className,
+            className: cx(triggerClassName, className),
             title: rest.title,
             disabled: disabled || !canOpenMenu,
             autoFocus,
@@ -3247,42 +2991,15 @@ function SelectBase({
             onBlur: handleTriggerBlur,
             onKeyDown: handleTriggerKeyDown,
             style: {
-              width: "100%",
-              boxSizing: "border-box",
-              height: controlMetrics.height,
-              borderRadius: STANDARD_COMPONENT_BORDER_RADIUS,
-              border: `1px solid ${error ? theme.colors.negative : theme.colors.textLight}`,
-              backgroundColor: theme.colors.surface,
-              color: hasSelection ? theme.colors.text : placeholderTextColor,
-              cursor: disabled ? "not-allowed" : "pointer",
-              opacity: disabled ? DISABLED_FIELD_OPACITY : 1,
-              padding: getSelectControlPadding(controlSize),
-              outline: "none",
-              boxShadow: componentShadow,
-              font: "inherit",
-              fontSize: controlMetrics.fontSize,
-              lineHeight: controlMetrics.lineHeight,
-              transition: FIELD_SURFACE_TRANSITION,
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "space-between",
-              gap: 12,
-              minWidth: 0,
-              textAlign: "left",
+              padding: `${controlMetrics.paddingY}px ${controlMetrics.selectPaddingRight}px ${controlMetrics.paddingY}px ${controlMetrics.paddingX}px`,
+              boxShadow: triggerBoxShadow,
               ...style
             },
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                 "span",
                 {
-                  style: {
-                    display: "block",
-                    flex: "1 1 auto",
-                    minWidth: 0,
-                    overflow: "hidden",
-                    textOverflow: "ellipsis",
-                    whiteSpace: "nowrap"
-                  },
+                  className: "block min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap",
                   children: displayContent
                 }
               ),
@@ -3290,18 +3007,14 @@ function SelectBase({
                 "span",
                 {
                   "aria-hidden": "true",
+                  className: cx(
+                    "pointer-events-none absolute top-1/2 flex -translate-y-1/2 items-center justify-center",
+                    "transition-[transform,color] duration-150",
+                    disabled ? "text-[var(--ui-kit-select-indicator-disabled)]" : "text-[var(--ui-kit-select-muted)]"
+                  ),
                   style: {
-                    position: "absolute",
                     right: indicatorOffset,
-                    top: "50%",
-                    transform: `translateY(-50%) rotate(${isOpen ? 180 : 0}deg)`,
-                    transformOrigin: "center",
-                    color: disabled ? withAlpha(theme.colors.text, 0.42) : mutedText,
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    pointerEvents: "none",
-                    transition: "transform 160ms ease, color 160ms ease"
+                    transform: `translateY(-50%) rotate(${isOpen ? 180 : 0}deg)`
                   },
                   children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                     "path",
@@ -3331,17 +3044,7 @@ function SelectBase({
             onChange: handleHiddenSelectChange,
             tabIndex: -1,
             "aria-hidden": "true",
-            style: {
-              position: "absolute",
-              width: 1,
-              height: 1,
-              padding: 0,
-              margin: 0,
-              border: 0,
-              opacity: 0,
-              pointerEvents: "none",
-              clipPath: "inset(50%)"
-            },
+            className: "ui-kit-sr-only pointer-events-none opacity-0",
             children: nativeOptions
           }
         ),
@@ -3349,7 +3052,7 @@ function SelectBase({
           /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("style", { children: `
                 #${listboxId} {
                   scrollbar-width: thin;
-                  scrollbar-color: ${scrollbarThumbColor} transparent;
+                  scrollbar-color: var(--ui-kit-select-scrollbar-thumb) transparent;
                 }
 
                 #${listboxId}::-webkit-scrollbar {
@@ -3361,19 +3064,19 @@ function SelectBase({
                 }
 
                 #${listboxId}::-webkit-scrollbar-thumb {
-                  background: ${scrollbarThumbColor};
+                  background: var(--ui-kit-select-scrollbar-thumb);
                   border-radius: 999px;
                   border: 2px solid transparent;
                   background-clip: padding-box;
                 }
 
                 #${listboxId}::-webkit-scrollbar-thumb:hover {
-                  background: ${scrollbarThumbHoverColor};
+                  background: var(--ui-kit-select-scrollbar-thumb-hover);
                   background-clip: padding-box;
                 }
 
                 #${searchInputId}::placeholder {
-                  color: ${placeholderTextColor};
+                  color: var(--ui-kit-select-placeholder);
                   opacity: 1;
                 }
               ` }),
@@ -3381,40 +3084,21 @@ function SelectBase({
             "div",
             {
               ref: menuRef,
+              className: "absolute left-0 right-0 z-30 flex max-h-[280px] flex-col gap-1 overflow-hidden rounded-[20px] border p-2",
               style: {
-                position: "absolute",
                 top: menuPlacement === "bottom" ? `calc(100% + ${MENU_OFFSET}px)` : "auto",
                 bottom: menuPlacement === "top" ? `calc(100% + ${MENU_OFFSET}px)` : "auto",
-                left: 0,
-                right: 0,
-                zIndex: 30,
-                maxHeight: MENU_MAX_HEIGHT,
-                overflow: "hidden",
-                boxSizing: "border-box",
-                borderRadius: 20,
-                border: `1px solid ${theme.colors.textLight}`,
-                backgroundColor: surfaceRaised,
-                padding: 8,
-                boxShadow: componentShadow,
-                backdropFilter: "blur(6px)",
-                visibility: isPlacementResolved ? "visible" : "hidden",
-                display: "flex",
-                flexDirection: "column",
-                gap: 4
+                borderColor: "var(--theme-textLight)",
+                backgroundColor: "var(--ui-kit-select-surface-raised)",
+                boxShadow: "var(--ui-kit-select-control-shadow)",
+                visibility: isPlacementResolved ? "visible" : "hidden"
               },
               children: [
                 hasFilter ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                   "div",
                   {
-                    style: {
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "flex-start",
-                      gap: 8,
-                      padding: "4px 4px 10px",
-                      borderBottom: `1px solid ${withAlpha(theme.colors.text, 0.08)}`,
-                      flexShrink: 0
-                    },
+                    className: "flex shrink-0 items-center justify-start gap-2 border-b px-1 pb-[10px] pt-1",
+                    style: { borderColor: "var(--ui-kit-select-divider)" },
                     children: [
                       bulkToggleControl,
                       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
@@ -3437,20 +3121,10 @@ function SelectBase({
                           },
                           placeholder: searchPlaceholder,
                           "aria-label": searchPlaceholder,
+                          className: "w-full flex-1 rounded-[11px] border bg-[var(--theme-surface)] px-[11px] py-[7px] text-[11px] leading-[1.4] text-[var(--theme-text)] outline-none",
                           style: {
-                            flex: "1 1 auto",
-                            width: "100%",
-                            border: `1px solid ${theme.colors.textLight}`,
-                            backgroundColor: theme.colors.surface,
-                            padding: "7px 11px",
-                            borderRadius: 11,
-                            font: "inherit",
-                            fontSize: 11,
-                            lineHeight: 1.4,
-                            color: theme.colors.text,
-                            outline: "none",
-                            boxSizing: "border-box",
-                            boxShadow: componentShadow
+                            borderColor: "var(--theme-textLight)",
+                            boxShadow: "var(--ui-kit-select-control-shadow)"
                           }
                         }
                       )
@@ -3459,14 +3133,8 @@ function SelectBase({
                 ) : isMultiSelect ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                   "div",
                   {
-                    style: {
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "flex-start",
-                      padding: "4px 4px 10px",
-                      borderBottom: `1px solid ${withAlpha(theme.colors.text, 0.08)}`,
-                      flexShrink: 0
-                    },
+                    className: "flex shrink-0 items-center justify-start border-b px-1 pb-[10px] pt-1",
+                    style: { borderColor: "var(--ui-kit-select-divider)" },
                     children: bulkToggleControl
                   }
                 ) : null,
@@ -3478,44 +3146,22 @@ function SelectBase({
                     "aria-labelledby": resolvedId,
                     "aria-multiselectable": isMultiSelect || void 0,
                     onScroll: onListboxScroll,
-                    style: {
-                      overflowY: "auto",
-                      overflowX: "hidden",
-                      minHeight: 0,
-                      flex: "1 1 auto"
-                    },
+                    className: "min-h-0 flex-1 overflow-y-auto overflow-x-hidden",
                     children: visibleGroups.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                       "div",
                       {
-                        style: {
-                          padding: "14px 12px",
-                          color: mutedText,
-                          fontSize: 13,
-                          textAlign: "center"
-                        },
+                        className: "px-3 py-[14px] text-center text-[13px] text-[var(--ui-kit-select-muted)]",
                         children: emptyState
                       }
                     ) : visibleGroups.map((group) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                       "div",
                       {
-                        style: {
-                          display: "flex",
-                          flexDirection: "column",
-                          gap: 4,
-                          marginTop: group.label ? 4 : 0
-                        },
+                        className: cx("flex flex-col gap-1", group.label ? "mt-1" : "mt-0"),
                         children: [
                           group.label ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                             "span",
                             {
-                              style: {
-                                padding: "6px 8px 2px",
-                                color: mutedText,
-                                fontSize: 11,
-                                fontWeight: 800,
-                                letterSpacing: "0.08em",
-                                textTransform: "uppercase"
-                              },
+                              className: "px-2 pb-0.5 pt-1.5 text-[11px] font-extrabold uppercase tracking-[0.08em] text-[var(--ui-kit-select-muted)]",
                               children: group.label
                             }
                           ) : null,
@@ -3547,33 +3193,22 @@ function SelectBase({
                                     commitSelection(option.value);
                                   }
                                 },
-                                style: {
-                                  display: "flex",
-                                  alignItems: "center",
-                                  justifyContent: "space-between",
-                                  gap: 12,
-                                  width: "100%",
-                                  minWidth: 0,
-                                  boxSizing: "border-box",
-                                  borderRadius: 12,
-                                  padding: getOptionPadding(controlSize),
-                                  cursor: option.disabled ? "not-allowed" : "pointer",
-                                  color: option.disabled ? withAlpha(theme.colors.text, 0.38) : isActive ? theme.colors.onPrimary : theme.colors.text,
-                                  backgroundColor: isSelected ? optionSelectedBackground : isHighlighted ? optionHoverBackground : "transparent",
-                                  fontWeight: isSelected ? 700 : 400,
-                                  transition: "background-color 140ms ease, color 140ms ease"
-                                },
+                                className: cx(
+                                  "flex w-full min-w-0 items-center justify-between gap-3 rounded-xl box-border",
+                                  "transition-[background-color,color] duration-150",
+                                  OPTION_PADDING_CLASSNAMES[controlSize],
+                                  option.disabled ? "cursor-not-allowed text-[var(--ui-kit-select-option-disabled)]" : "cursor-pointer",
+                                  !option.disabled && isActive ? "text-[var(--theme-onPrimary)]" : null,
+                                  !option.disabled && !isActive ? "text-[var(--theme-text)]" : null,
+                                  isSelected ? "bg-[var(--ui-kit-select-option-selected-bg)] font-bold" : null,
+                                  !isSelected && isHighlighted ? "bg-[var(--ui-kit-select-option-hover-bg)]" : null,
+                                  !isSelected && !isHighlighted ? "bg-[var(--theme-surface)] font-normal" : null
+                                ),
                                 children: [
                                   /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                                     "span",
                                     {
-                                      style: {
-                                        display: "flex",
-                                        alignItems: "center",
-                                        gap: 10,
-                                        flex: "1 1 auto",
-                                        minWidth: 0
-                                      },
+                                      className: "flex min-w-0 flex-1 items-center gap-2.5",
                                       children: [
                                         isMultiSelect ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                                           CheckboxIndicator,
@@ -3581,23 +3216,16 @@ function SelectBase({
                                             checked: isSelected,
                                             disabled: option.disabled,
                                             size: 16,
-                                            checkedColor: isActive ? theme.colors.onPrimary : theme.colors.primary,
-                                            iconColor: isActive ? theme.colors.primary : theme.colors.onPrimary,
-                                            uncheckedBorderColor: isActive ? theme.colors.onPrimary : withAlpha(theme.colors.text, 0.26),
+                                            checkedColor: isActive ? "var(--theme-onPrimary)" : "var(--theme-primary)",
+                                            iconColor: isActive ? "var(--theme-primary)" : "var(--theme-onPrimary)",
+                                            uncheckedBorderColor: isActive ? "var(--theme-onPrimary)" : withAlpha(theme.colors.text, 0.26),
                                             uncheckedBackgroundColor: "transparent"
                                           }
                                         ) : null,
                                         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                                           "span",
                                           {
-                                            style: {
-                                              display: "block",
-                                              flex: "1 1 auto",
-                                              minWidth: 0,
-                                              overflow: "hidden",
-                                              textOverflow: "ellipsis",
-                                              whiteSpace: "nowrap"
-                                            },
+                                            className: "block min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap",
                                             children: option.label
                                           }
                                         )
@@ -3608,13 +3236,7 @@ function SelectBase({
                                     "span",
                                     {
                                       "aria-hidden": "true",
-                                      style: {
-                                        display: "flex",
-                                        alignItems: "center",
-                                        justifyContent: "center",
-                                        color: theme.colors.primary,
-                                        flexShrink: 0
-                                      },
+                                      className: "flex shrink-0 items-center justify-center text-[var(--theme-primary)]",
                                       children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                                         "path",
                                         {
@@ -3641,11 +3263,8 @@ function SelectBase({
                 menuFooter ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                   "div",
                   {
-                    style: {
-                      padding: "10px 8px 4px",
-                      borderTop: `1px solid ${withAlpha(theme.colors.text, 0.08)}`,
-                      flexShrink: 0
-                    },
+                    className: "shrink-0 border-t px-2 pb-1 pt-2.5",
+                    style: { borderColor: "var(--ui-kit-select-divider)" },
                     children: menuFooter
                   }
                 ) : null
@@ -3659,7 +3278,7 @@ function SelectBase({
 }
 
 // src/componentsBase/select/childrenAdapter.ts
-var import_react10 = require("react");
+var import_react9 = require("react");
 function buildOption(keyPrefix, index, props, groupDisabled = false) {
   var _a;
   const rawValue = props.value !== void 0 ? props.value : getTextContent(props.children).trim();
@@ -3686,8 +3305,8 @@ function parseSelectChildren(children) {
     });
     standaloneOptions.length = 0;
   };
-  import_react10.Children.forEach(children, (child) => {
-    if (!(0, import_react10.isValidElement)(child)) {
+  import_react9.Children.forEach(children, (child) => {
+    if (!(0, import_react9.isValidElement)(child)) {
       return;
     }
     if (child.type === "option") {
@@ -3701,8 +3320,8 @@ function parseSelectChildren(children) {
     flushStandaloneOptions();
     const groupOptions = [];
     let groupOptionIndex = 0;
-    import_react10.Children.forEach(child.props.children, (optionChild) => {
-      if (!(0, import_react10.isValidElement)(optionChild) || optionChild.type !== "option") {
+    import_react9.Children.forEach(child.props.children, (optionChild) => {
+      if (!(0, import_react9.isValidElement)(optionChild) || optionChild.type !== "option") {
         return;
       }
       groupOptions.push(
@@ -3735,7 +3354,7 @@ function Select({ children, ...props }) {
 }
 
 // src/components/SelectAsync.tsx
-var import_react11 = require("react");
+var import_react10 = require("react");
 
 // src/componentsBase/select/objectOptionsAdapter.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
@@ -3838,29 +3457,29 @@ function SelectAsync({
   ...props
 }) {
   var _a;
-  const { theme, mutedText } = useUiKitTheme();
+  useUiKitTheme();
   const isMultiSelect = Boolean(isMulti);
   const isControlled = value !== void 0;
-  const [internalSelectedOptions, setInternalSelectedOptions] = (0, import_react11.useState)(() => {
+  const [internalSelectedOptions, setInternalSelectedOptions] = (0, import_react10.useState)(() => {
     return normalizeAsyncValue(defaultValue, isMultiSelect);
   });
-  const [remoteOptions, setRemoteOptions] = (0, import_react11.useState)(defaultOptions);
-  const [searchQuery, setSearchQuery] = (0, import_react11.useState)("");
-  const [nextPage, setNextPage] = (0, import_react11.useState)(1);
-  const [hasMore, setHasMore] = (0, import_react11.useState)(true);
-  const [isInitialLoading, setIsInitialLoading] = (0, import_react11.useState)(false);
-  const [isLoadingMore, setIsLoadingMore] = (0, import_react11.useState)(false);
-  const [loadError, setLoadError] = (0, import_react11.useState)(null);
+  const [remoteOptions, setRemoteOptions] = (0, import_react10.useState)(defaultOptions);
+  const [searchQuery, setSearchQuery] = (0, import_react10.useState)("");
+  const [nextPage, setNextPage] = (0, import_react10.useState)(1);
+  const [hasMore, setHasMore] = (0, import_react10.useState)(true);
+  const [isInitialLoading, setIsInitialLoading] = (0, import_react10.useState)(false);
+  const [isLoadingMore, setIsLoadingMore] = (0, import_react10.useState)(false);
+  const [loadError, setLoadError] = (0, import_react10.useState)(null);
   const selectedOptions = isControlled ? normalizeAsyncValue(value, isMultiSelect) : internalSelectedOptions;
-  const optionLookupRef = (0, import_react11.useRef)(/* @__PURE__ */ new Map());
-  const loadOptionsRef = (0, import_react11.useRef)(loadOptions);
-  const remoteOptionsRef = (0, import_react11.useRef)(remoteOptions);
-  const cacheUniqsRef = (0, import_react11.useRef)(cacheUniqs);
-  const requestVersionRef = (0, import_react11.useRef)(0);
-  const activeControllerRef = (0, import_react11.useRef)(null);
+  const optionLookupRef = (0, import_react10.useRef)(/* @__PURE__ */ new Map());
+  const loadOptionsRef = (0, import_react10.useRef)(loadOptions);
+  const remoteOptionsRef = (0, import_react10.useRef)(remoteOptions);
+  const cacheUniqsRef = (0, import_react10.useRef)(cacheUniqs);
+  const requestVersionRef = (0, import_react10.useRef)(0);
+  const activeControllerRef = (0, import_react10.useRef)(null);
   loadOptionsRef.current = loadOptions;
   remoteOptionsRef.current = remoteOptions;
-  const mergedOptions = (0, import_react11.useMemo)(() => {
+  const mergedOptions = (0, import_react10.useMemo)(() => {
     const baseOptions = dedupeSelectObjectOptions([
       ...fixedOptions,
       ...remoteOptions
@@ -3871,20 +3490,20 @@ function SelectAsync({
     });
     return [...baseOptions, ...missingSelectedOptions];
   }, [fixedOptions, remoteOptions, selectedOptions]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     const nextLookup = /* @__PURE__ */ new Map();
     mergedOptions.forEach((option) => {
       nextLookup.set(getSelectObjectOptionKey(option), option);
     });
     optionLookupRef.current = nextLookup;
   }, [mergedOptions]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (isControlled) {
       return;
     }
     setInternalSelectedOptions(normalizeAsyncValue(defaultValue, isMultiSelect));
   }, [defaultValue, isControlled, isMultiSelect]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (areUnknownArraysEqual(cacheUniqsRef.current, cacheUniqs)) {
       return;
     }
@@ -3895,7 +3514,7 @@ function SelectAsync({
     setHasMore(true);
     setLoadError(null);
   }, [cacheUniqs, defaultOptions]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     const timeoutId = window.setTimeout(() => {
       var _a2;
       requestVersionRef.current += 1;
@@ -3936,7 +3555,7 @@ function SelectAsync({
       window.clearTimeout(timeoutId);
     };
   }, [loadErrorMessage, searchDebounceMs, searchQuery, ...cacheUniqs]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     return () => {
       var _a2;
       (_a2 = activeControllerRef.current) == null ? void 0 : _a2.abort();
@@ -3997,28 +3616,15 @@ function SelectAsync({
     "div",
     {
       "aria-live": "polite",
-      style: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: hasMore ? "space-between" : "center",
-        gap: 12,
-        color: mutedText,
-        fontSize: 12,
-        lineHeight: 1.4
-      },
+      className: "flex items-center gap-3 text-xs leading-[1.4] text-[var(--ui-kit-muted-text)]",
+      style: { justifyContent: hasMore ? "space-between" : "center" },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: isLoadingMore ? loadingMoreMessage : hasMore ? loadMoreHintMessage : null }),
         isLoadingMore ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           "span",
           {
             "aria-hidden": "true",
-            style: {
-              width: 8,
-              height: 8,
-              borderRadius: 999,
-              backgroundColor: withAlpha(theme.colors.primary, 0.8),
-              flexShrink: 0
-            }
+            className: "h-2 w-2 shrink-0 rounded-full bg-[var(--theme-primary)] opacity-80"
           }
         ) : null
       ]
@@ -4052,13 +3658,13 @@ function SelectAsync({
 }
 
 // src/components/Table.tsx
-var import_react14 = require("react");
+var import_react13 = require("react");
 
 // src/componentsBase/table/TableBase.tsx
-var import_react13 = require("react");
+var import_react12 = require("react");
 
 // src/componentsBase/table/utils.ts
-var import_react12 = require("react");
+var import_react11 = require("react");
 var DEFAULT_COLLAPSE_BELOW = 420;
 var DEFAULT_MAX_INLINE_ACTIONS = 2;
 var DEFAULT_PAGE_SIZE = 10;
@@ -4101,7 +3707,7 @@ var getNodeText = (node) => {
   if (Array.isArray(node)) {
     return node.map((entry) => getNodeText(entry)).join(" ");
   }
-  if ((0, import_react12.isValidElement)(node)) {
+  if ((0, import_react11.isValidElement)(node)) {
     const element = node;
     return getNodeText(element.props.children);
   }
@@ -4117,7 +3723,7 @@ var normalizeTableText = (value) => {
   if (Array.isArray(value)) {
     return value.map((entry) => normalizeTableText(entry)).join(" ");
   }
-  if ((0, import_react12.isValidElement)(value)) {
+  if ((0, import_react11.isValidElement)(value)) {
     return getNodeText(value);
   }
   return "";
@@ -4507,9 +4113,9 @@ function DoubleChevronIcon({ direction }) {
   ] });
 }
 function OverflowMenu({ label, children, buttonStyle, menuStyle }) {
-  const [isOpen, setIsOpen] = (0, import_react13.useState)(false);
-  const containerRef = (0, import_react13.useRef)(null);
-  (0, import_react13.useEffect)(() => {
+  const [isOpen, setIsOpen] = (0, import_react12.useState)(false);
+  const containerRef = (0, import_react12.useRef)(null);
+  (0, import_react12.useEffect)(() => {
     if (!isOpen) {
       return;
     }
@@ -4577,10 +4183,10 @@ function TableBase({
   const uiKitTheme = useUiKitTheme();
   const { theme, borderSoft, borderStrong, focusRing, mutedText, surfaceMuted, surfaceRaised } = uiKitTheme;
   const componentShadow = getComponentShadow(theme);
-  const scrollRegionId = (0, import_react13.useId)().replace(/:/g, "");
-  const containerRef = (0, import_react13.useRef)(null);
-  const [containerWidth, setContainerWidth] = (0, import_react13.useState)(null);
-  const [isSettingsModalOpen, setIsSettingsModalOpen] = (0, import_react13.useState)(false);
+  const scrollRegionId = (0, import_react12.useId)().replace(/:/g, "");
+  const containerRef = (0, import_react12.useRef)(null);
+  const [containerWidth, setContainerWidth] = (0, import_react12.useState)(null);
+  const [isSettingsModalOpen, setIsSettingsModalOpen] = (0, import_react12.useState)(false);
   const resolvedLabels = mergeTableLabels({
     ...labels != null ? labels : {},
     ...translations != null ? translations : {}
@@ -4622,7 +4228,7 @@ function TableBase({
     boxShadow: stickyActionsColumnShadow,
     borderLeft: `1px solid ${borderSoft}`
   });
-  (0, import_react13.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     const element = containerRef.current;
     if (!element) {
       return;
@@ -4837,31 +4443,19 @@ function TableBase({
     "div",
     {
       ref: containerRef,
-      className,
-      style: {
-        width: "100%",
-        maxWidth: "100%",
-        minWidth: 0,
-        display: "flex",
-        flexDirection: "column",
-        gap: 16,
-        padding: 18,
-        boxSizing: "border-box",
-        borderRadius: 24,
-        backgroundColor: surfaceRaised,
-        color: theme.colors.text,
-        ...style
-      },
+      className: cx(
+        "flex w-full max-w-full min-w-0 flex-col gap-4 rounded-[24px]",
+        "box-border bg-[var(--ui-kit-surface-raised)] p-[18px] text-[var(--theme-text)]",
+        className
+      ),
+      style,
       children: [
-        shouldRenderToolbar ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: { display: "flex", flexWrap: "wrap", alignItems: "center", justifyContent: "space-between", gap: 12, minWidth: 0 }, children: [
+        shouldRenderToolbar ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex min-w-0 flex-wrap items-center justify-between gap-3", children: [
           shouldRenderToolbarPrimaryGroup ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
             "div",
             {
+              className: "flex min-w-0 items-center gap-2.5",
               style: {
-                display: "flex",
-                alignItems: "center",
-                gap: 10,
-                minWidth: 0,
                 flex: shouldShowSearch ? "1 1 260px" : "0 0 auto",
                 marginLeft: shouldShowSearch ? void 0 : "auto"
               },
@@ -4874,11 +4468,12 @@ function TableBase({
                     "aria-label": resolvedLabels.searchPlaceholder,
                     placeholder: resolvedLabels.searchPlaceholder,
                     onChange: (event) => onSearchChange(event.currentTarget.value),
+                    className: "h-[42px] min-w-0 flex-1 rounded-[14px] border bg-[var(--theme-surface)] px-[10px] text-sm leading-[1.4] text-[var(--theme-text)] outline-none",
                     style: {
-                      ...toolbarControlStyle,
                       flex: "1 1 260px",
                       maxWidth: 360,
-                      minWidth: 0
+                      borderColor: "var(--ui-kit-border-soft)",
+                      boxShadow: "var(--ui-kit-component-shadow)"
                     }
                   }
                 ) : null,
@@ -4899,19 +4494,12 @@ function TableBase({
           shouldShowToolbarStatus ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
             "div",
             {
-              style: {
-                display: "flex",
-                flexWrap: "wrap",
-                alignItems: "center",
-                justifyContent: "flex-end",
-                gap: 10,
-                minWidth: 0,
-                marginLeft: shouldRenderToolbarPrimaryGroup ? "auto" : void 0
-              },
+              className: "flex min-w-0 flex-wrap items-center justify-end gap-2.5",
+              style: { marginLeft: shouldRenderToolbarPrimaryGroup ? "auto" : void 0 },
               children: [
-                loading ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { style: { color: mutedText, fontSize: 13, fontWeight: 600 }, children: resolvedLabels.loadingMessage }) : null,
-                !loading && error && hasRows ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: { display: "inline-flex", alignItems: "center", gap: 10 }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { style: { color: theme.colors.negative, fontSize: 13, fontWeight: 600 }, children: resolvedLabels.errorMessage }),
+                loading ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-[13px] font-semibold text-[var(--ui-kit-muted-text)]", children: resolvedLabels.loadingMessage }) : null,
+                !loading && error && hasRows ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "inline-flex items-center gap-2.5", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-[13px] font-semibold text-[var(--theme-negative)]", children: resolvedLabels.errorMessage }),
                   onRetry ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Button, { size: "sm", variant: "ghost", onClick: onRetry, children: resolvedLabels.retryLabel }) : null
                 ] }) : null
               ]
@@ -4919,7 +4507,7 @@ function TableBase({
           ) : null
         ] }) : null,
         !hasRows && (!loading || error) ? renderEmptyState() : null,
-        hasRows ? isCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { role: "list", "aria-label": ariaLabel, style: { display: "flex", flexDirection: "column", gap: 14 }, children: items.map((item, rowIndex) => {
+        hasRows ? isCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { role: "list", "aria-label": ariaLabel, className: "flex flex-col gap-3.5", children: items.map((item, rowIndex) => {
           const rowActions = renderActions(item, rowIndex);
           const rowBackgroundColor = rowIndex % 2 === 0 ? theme.colors.surface : surfaceMuted;
           return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
@@ -5065,18 +4653,12 @@ function TableBase({
               id: scrollRegionId,
               role: "region",
               "aria-label": ariaLabel,
+              className: "w-full max-w-full min-w-0 overflow-x-auto overflow-y-hidden rounded-[20px] border bg-[var(--theme-surface)]",
               style: {
-                width: "100%",
-                maxWidth: "100%",
-                minWidth: 0,
-                overflowX: "auto",
-                overflowY: "hidden",
-                borderRadius: 20,
-                border: `1px solid ${borderSoft}`,
-                backgroundColor: theme.colors.surface,
-                boxShadow: componentShadow
+                borderColor: "var(--ui-kit-border-soft)",
+                boxShadow: "var(--ui-kit-component-shadow)"
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("table", { style: { width: "max-content", maxWidth: "none", minWidth: "100%", borderCollapse: "separate", borderSpacing: 0 }, children: [
+              children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("table", { className: "min-w-full max-w-none border-separate border-spacing-0", style: { width: "max-content" }, children: [
                 /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("tr", { children: [
                   desktopColumns.map((column, columnIndex) => {
                     var _a, _b;
@@ -5162,17 +4744,10 @@ function TableBase({
         hasRows && shouldRenderFooter ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
           "div",
           {
-            style: {
-              display: "flex",
-              flexWrap: "wrap",
-              alignItems: "center",
-              justifyContent: "space-between",
-              gap: 12,
-              paddingTop: 4
-            },
+            className: "flex flex-wrap items-center justify-between gap-3 pt-1",
             children: [
-              shouldShowPaginationControls ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { style: { color: mutedText, fontSize: 13, marginRight: 4 }, children: resolvedLabels.pageLabel(normalizedPage, totalPages) }),
+              shouldShowPaginationControls ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-wrap items-center gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "mr-1 text-[13px] text-[var(--ui-kit-muted-text)]", children: resolvedLabels.pageLabel(normalizedPage, totalPages) }),
                 /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
                   "button",
                   {
@@ -5218,22 +4793,29 @@ function TableBase({
                   }
                 )
               ] }) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: { display: "flex", alignItems: "center", gap: 10, color: mutedText, fontSize: 13, marginLeft: shouldShowRowsPerPageControl ? "auto" : void 0 }, children: shouldShowRowsPerPageControl ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: resolvedLabels.rowsPerPageLabel }),
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-                  "select",
-                  {
-                    value: pageSize,
-                    onChange: (event) => onInternalPageSizeChange(Number(event.currentTarget.value)),
-                    style: {
-                      ...toolbarControlStyle,
-                      height: 38,
-                      padding: "0 12px"
-                    },
-                    children: normalizedPageSizeOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("option", { value: option, children: option }, option))
-                  }
-                )
-              ] }) : null })
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                "div",
+                {
+                  className: "flex items-center gap-2.5 text-[13px] text-[var(--ui-kit-muted-text)]",
+                  style: { marginLeft: shouldShowRowsPerPageControl ? "auto" : void 0 },
+                  children: shouldShowRowsPerPageControl ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: resolvedLabels.rowsPerPageLabel }),
+                    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                      "select",
+                      {
+                        value: pageSize,
+                        onChange: (event) => onInternalPageSizeChange(Number(event.currentTarget.value)),
+                        className: "h-[34px] rounded-[14px] border bg-[var(--theme-surface)] px-3 text-sm leading-[1.4] text-[var(--theme-text)] outline-none",
+                        style: {
+                          borderColor: "var(--ui-kit-border-soft)",
+                          boxShadow: "var(--ui-kit-component-shadow)"
+                        },
+                        children: normalizedPageSizeOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("option", { value: option, children: option }, option))
+                      }
+                    )
+                  ] }) : null
+                }
+              )
             ]
           }
         ) : null,
@@ -5246,31 +4828,31 @@ function TableBase({
             maxWidth: 560,
             bodyStyle: { display: "grid", gap: 0 },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("section", { style: { display: "grid", gap: 12 }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("strong", { style: { color: theme.colors.text, fontSize: 14 }, children: resolvedLabels.tableInfoSectionTitle }),
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: { display: "grid", gap: 10, gridTemplateColumns: "repeat(auto-fit, minmax(120px, 1fr))" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("section", { className: "grid gap-3", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("strong", { className: "text-sm text-[var(--theme-text)]", children: resolvedLabels.tableInfoSectionTitle }),
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: infoCardStyle, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { style: { color: mutedText, fontSize: 10, fontWeight: 700, letterSpacing: "0.06em", textTransform: "uppercase" }, children: resolvedLabels.totalPagesInfoLabel }),
-                    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("strong", { style: { color: theme.colors.text, fontSize: 18, lineHeight: 1.1 }, children: totalPages })
+                    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-[10px] font-bold uppercase tracking-[0.06em] text-[var(--ui-kit-muted-text)]", children: resolvedLabels.totalPagesInfoLabel }),
+                    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("strong", { className: "text-[18px] leading-[1.1] text-[var(--theme-text)]", children: totalPages })
                   ] }),
                   /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: infoCardStyle, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { style: { color: mutedText, fontSize: 10, fontWeight: 700, letterSpacing: "0.06em", textTransform: "uppercase" }, children: resolvedLabels.totalItemsInfoLabel }),
-                    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("strong", { style: { color: theme.colors.text, fontSize: 18, lineHeight: 1.1 }, children: totalItemCount })
+                    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-[10px] font-bold uppercase tracking-[0.06em] text-[var(--ui-kit-muted-text)]", children: resolvedLabels.totalItemsInfoLabel }),
+                    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("strong", { className: "text-[18px] leading-[1.1] text-[var(--theme-text)]", children: totalItemCount })
                   ] }),
                   /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: infoCardStyle, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { style: { color: mutedText, fontSize: 10, fontWeight: 700, letterSpacing: "0.06em", textTransform: "uppercase" }, children: resolvedLabels.currentPageInfoLabel }),
-                    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("strong", { style: { color: theme.colors.text, fontSize: 18, lineHeight: 1.1 }, children: normalizedPage })
+                    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-[10px] font-bold uppercase tracking-[0.06em] text-[var(--ui-kit-muted-text)]", children: resolvedLabels.currentPageInfoLabel }),
+                    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("strong", { className: "text-[18px] leading-[1.1] text-[var(--theme-text)]", children: normalizedPage })
                   ] }),
                   /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: infoCardStyle, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { style: { color: mutedText, fontSize: 10, fontWeight: 700, letterSpacing: "0.06em", textTransform: "uppercase" }, children: resolvedLabels.currentPageItemsInfoLabel }),
-                    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("strong", { style: { color: theme.colors.text, fontSize: 18, lineHeight: 1.1 }, children: currentPageItemCount })
+                    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-[10px] font-bold uppercase tracking-[0.06em] text-[var(--ui-kit-muted-text)]", children: resolvedLabels.currentPageItemsInfoLabel }),
+                    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("strong", { className: "text-[18px] leading-[1.1] text-[var(--theme-text)]", children: currentPageItemCount })
                   ] })
                 ] })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: { paddingBlock: 18 }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Separator, { orientation: "horizontal", color: borderSoft }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("section", { style: { display: "grid", gap: 12 }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("strong", { style: { color: theme.colors.text, fontSize: 14 }, children: resolvedLabels.downloadSectionTitle }),
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: { display: "flex", flexWrap: "wrap", gap: 10 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "py-[18px]", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Separator, { orientation: "horizontal", color: borderSoft }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("section", { className: "grid gap-3", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("strong", { className: "text-sm text-[var(--theme-text)]", children: resolvedLabels.downloadSectionTitle }),
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-wrap gap-2.5", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Button, { size: "sm", variant: "outline", onClick: handleDownloadCsv, disabled: !hasRows, children: resolvedLabels.downloadCsvLabel }),
                   /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Button, { size: "sm", variant: "outline", onClick: handleDownloadXls, disabled: !hasRows, children: resolvedLabels.downloadXlsLabel }),
                   /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Button, { size: "sm", variant: "outline", onClick: handleDownloadPdf, disabled: !hasRows, children: resolvedLabels.downloadPdfLabel })
@@ -5301,13 +4883,13 @@ function Table({
   ...props
 }) {
   var _a;
-  const initialPageSizeOptions = (0, import_react14.useMemo)(() => {
+  const initialPageSizeOptions = (0, import_react13.useMemo)(() => {
     return sanitizePageSizeOptions(pageSizeOptions, defaultPageSize);
   }, [defaultPageSize, pageSizeOptions]);
-  const [searchValue, setSearchValue] = (0, import_react14.useState)(defaultSearchValue);
-  const [page, setPage] = (0, import_react14.useState)(Math.max(1, Math.floor(defaultPage)));
-  const [pageSize, setPageSize] = (0, import_react14.useState)((_a = initialPageSizeOptions[0]) != null ? _a : DEFAULT_PAGE_SIZE);
-  (0, import_react14.useEffect)(() => {
+  const [searchValue, setSearchValue] = (0, import_react13.useState)(defaultSearchValue);
+  const [page, setPage] = (0, import_react13.useState)(Math.max(1, Math.floor(defaultPage)));
+  const [pageSize, setPageSize] = (0, import_react13.useState)((_a = initialPageSizeOptions[0]) != null ? _a : DEFAULT_PAGE_SIZE);
+  (0, import_react13.useEffect)(() => {
     var _a2;
     if (initialPageSizeOptions.includes(pageSize)) {
       return;
@@ -5315,7 +4897,7 @@ function Table({
     const nextPageSize = (_a2 = initialPageSizeOptions[0]) != null ? _a2 : DEFAULT_PAGE_SIZE;
     setPageSize(nextPageSize);
   }, [initialPageSizeOptions, pageSize]);
-  const filteredItems = (0, import_react14.useMemo)(() => {
+  const filteredItems = (0, import_react13.useMemo)(() => {
     if (!searchable) {
       return items;
     }
@@ -5333,14 +4915,14 @@ function Table({
   const totalItems = filteredItems.length;
   const totalPages = Math.max(1, Math.ceil(totalItems / pageSize));
   const normalizedPage = clampPage(page, totalPages);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (normalizedPage === page) {
       return;
     }
     setPage(normalizedPage);
     onPageChange == null ? void 0 : onPageChange(normalizedPage);
   }, [normalizedPage, onPageChange, page]);
-  const pageItems = (0, import_react14.useMemo)(() => {
+  const pageItems = (0, import_react13.useMemo)(() => {
     const startIndex = (normalizedPage - 1) * pageSize;
     return filteredItems.slice(startIndex, startIndex + pageSize);
   }, [filteredItems, normalizedPage, pageSize]);
@@ -5380,7 +4962,7 @@ function Table({
 }
 
 // src/components/TableAsync.tsx
-var import_react15 = require("react");
+var import_react14 = require("react");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var areUnknownArraysEqual2 = (left, right) => {
   if (left.length !== right.length) {
@@ -5406,25 +4988,25 @@ function TableAsync({
   ...props
 }) {
   var _a;
-  const initialPageSizeOptions = (0, import_react15.useMemo)(() => {
+  const initialPageSizeOptions = (0, import_react14.useMemo)(() => {
     return sanitizePageSizeOptions(pageSizeOptions, defaultPageSize);
   }, [defaultPageSize, pageSizeOptions]);
-  const [searchValue, setSearchValue] = (0, import_react15.useState)(defaultSearchValue);
-  const [debouncedSearchValue, setDebouncedSearchValue] = (0, import_react15.useState)(defaultSearchValue);
-  const [page, setPage] = (0, import_react15.useState)(Math.max(1, Math.floor(defaultPage)));
-  const [pageSize, setPageSize] = (0, import_react15.useState)((_a = initialPageSizeOptions[0]) != null ? _a : DEFAULT_PAGE_SIZE);
-  const [items, setItems] = (0, import_react15.useState)([]);
-  const [totalPages, setTotalPages] = (0, import_react15.useState)(1);
-  const [totalItems, setTotalItems] = (0, import_react15.useState)(void 0);
-  const [loading, setLoading] = (0, import_react15.useState)(false);
-  const [error, setError] = (0, import_react15.useState)(null);
-  const [reloadKey, setReloadKey] = (0, import_react15.useState)(0);
-  const loadItemsRef = (0, import_react15.useRef)(loadItems);
-  const cacheUniqsRef = (0, import_react15.useRef)(cacheUniqs);
-  const activeControllerRef = (0, import_react15.useRef)(null);
-  const requestVersionRef = (0, import_react15.useRef)(0);
+  const [searchValue, setSearchValue] = (0, import_react14.useState)(defaultSearchValue);
+  const [debouncedSearchValue, setDebouncedSearchValue] = (0, import_react14.useState)(defaultSearchValue);
+  const [page, setPage] = (0, import_react14.useState)(Math.max(1, Math.floor(defaultPage)));
+  const [pageSize, setPageSize] = (0, import_react14.useState)((_a = initialPageSizeOptions[0]) != null ? _a : DEFAULT_PAGE_SIZE);
+  const [items, setItems] = (0, import_react14.useState)([]);
+  const [totalPages, setTotalPages] = (0, import_react14.useState)(1);
+  const [totalItems, setTotalItems] = (0, import_react14.useState)(void 0);
+  const [loading, setLoading] = (0, import_react14.useState)(false);
+  const [error, setError] = (0, import_react14.useState)(null);
+  const [reloadKey, setReloadKey] = (0, import_react14.useState)(0);
+  const loadItemsRef = (0, import_react14.useRef)(loadItems);
+  const cacheUniqsRef = (0, import_react14.useRef)(cacheUniqs);
+  const activeControllerRef = (0, import_react14.useRef)(null);
+  const requestVersionRef = (0, import_react14.useRef)(0);
   loadItemsRef.current = loadItems;
-  (0, import_react15.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     var _a2;
     if (initialPageSizeOptions.includes(pageSize)) {
       return;
@@ -5432,7 +5014,7 @@ function TableAsync({
     const nextPageSize = (_a2 = initialPageSizeOptions[0]) != null ? _a2 : DEFAULT_PAGE_SIZE;
     setPageSize(nextPageSize);
   }, [initialPageSizeOptions, pageSize]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     const timeoutId = window.setTimeout(() => {
       setDebouncedSearchValue(searchValue);
     }, searchDebounceMs);
@@ -5440,7 +5022,7 @@ function TableAsync({
       window.clearTimeout(timeoutId);
     };
   }, [searchDebounceMs, searchValue]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (areUnknownArraysEqual2(cacheUniqsRef.current, cacheUniqs)) {
       return;
     }
@@ -5448,7 +5030,7 @@ function TableAsync({
     setPage(1);
     setReloadKey((currentValue) => currentValue + 1);
   }, [cacheUniqs]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     var _a2;
     requestVersionRef.current += 1;
     const currentRequestVersion = requestVersionRef.current;
@@ -5486,14 +5068,14 @@ function TableAsync({
       setLoading(false);
     });
   }, [debouncedSearchValue, keepPreviousData, page, pageSize, reloadKey, searchable, ...cacheUniqs]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     return () => {
       var _a2;
       (_a2 = activeControllerRef.current) == null ? void 0 : _a2.abort();
     };
   }, []);
   const normalizedPage = clampPage(page, totalPages);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (normalizedPage === page) {
       return;
     }
@@ -5540,10 +5122,10 @@ function TableAsync({
 
 // src/components/Textarea.tsx
 var import_jsx_runtime17 = require("react/jsx-runtime");
-var getPadding = (size) => {
-  if (size === "sm") return "10px 12px";
-  if (size === "lg") return "16px 18px";
-  return "13px 16px";
+var TEXTAREA_SIZE_CLASSNAMES = {
+  sm: "px-3 py-[10px] text-[13px] leading-4",
+  md: "px-[14px] py-[11px] text-sm leading-[18px]",
+  lg: "px-4 py-3 text-[15px] leading-[18px]"
 };
 function Textarea({
   label,
@@ -5556,25 +5138,27 @@ function Textarea({
   rows = 5,
   ...rest
 }) {
-  const { theme, focusRing } = useUiKitTheme();
-  const componentShadow = getComponentShadow(theme);
-  const textareaStyle = {
-    border: `1px solid ${error ? theme.colors.negative : theme.colors.textLight}`,
-    backgroundColor: theme.colors.surface,
-    color: theme.colors.text,
-    cursor: disabled ? "not-allowed" : "text",
-    opacity: disabled ? DISABLED_FIELD_OPACITY : 1,
-    width: "100%",
-    boxSizing: "border-box",
-    borderRadius: STANDARD_COMPONENT_BORDER_RADIUS,
-    padding: getPadding(controlSize),
-    outline: "none",
-    boxShadow: error ? `0 0 0 3px ${withAlpha(theme.colors.negative, 0.12)}, ${componentShadow}` : `${componentShadow}, 0 0 0 0 ${focusRing}`,
-    transition: FIELD_SURFACE_TRANSITION,
-    resize: "vertical",
-    ...style
-  };
-  const textarea = /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("textarea", { ...rest, id, disabled, rows, style: textareaStyle });
+  useUiKitTheme();
+  const textarea = /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    "textarea",
+    {
+      ...rest,
+      id,
+      disabled,
+      rows,
+      className: cx(
+        "w-full min-w-0 box-border resize-y rounded-2xl border border-solid bg-[var(--theme-surface)]",
+        "text-[var(--theme-text)] outline-none transition-[border-color,box-shadow,background-color]",
+        "duration-150 disabled:cursor-not-allowed disabled:opacity-70",
+        error ? "border-[var(--theme-negative)]" : "border-[var(--theme-textLight)]",
+        TEXTAREA_SIZE_CLASSNAMES[controlSize]
+      ),
+      style: {
+        boxShadow: error ? "0 0 0 3px var(--ui-kit-negative-soft), var(--ui-kit-component-shadow)" : "var(--ui-kit-component-shadow)",
+        ...style
+      }
+    }
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ControlFrame, { label, hint, error, htmlFor: id, required: rest.required, children: textarea });
 }
 // Annotate the CommonJS export names for ESM import in node: