smartsell-ui-kit 0.1.1 → 0.1.2

package/dist/index.js

@@ -1,9 +1,11 @@
-// src/components/Button.tsx
-import { useState } from "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();
@@ -31,52 +33,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";
@@ -88,12 +66,24 @@ 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;
 
 // src/foundation/theme.ts
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
 import {
   darkTheme,
   lightTheme,
@@ -151,6 +141,47 @@ var assertThemeColorSchema = (theme) => {
 };
 assertThemeColorSchema(lightTheme);
 assertThemeColorSchema(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;
@@ -198,11 +229,61 @@ function createUiKitThemeTokens(themeSource) {
 }
 function useUiKitTheme() {
   const activeTheme = useThemeValue();
-  return useMemo(() => createUiKitThemeTokens(activeTheme), [activeTheme]);
+  const tokens = useMemo(() => createUiKitThemeTokens(activeTheme), [activeTheme]);
+  useEffect(() => {
+    syncUiKitThemeVariables(tokens);
+  }, [tokens]);
+  return tokens;
 }
 
 // src/components/Button.tsx
 import { jsxs } from "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",
@@ -210,137 +291,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] = useState(false);
-  const [isPressed, setIsPressed] = 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__ */ 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,
@@ -358,67 +329,30 @@ function Card({
   title,
   action,
   padded = true,
-  style,
+  className,
   ...rest
 }) {
-  const { theme } = useUiKitTheme();
-  const componentShadow = getComponentShadow(theme);
+  useUiKitTheme();
   return /* @__PURE__ */ jsxs2(
     "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__ */ jsxs2(
-          "div",
-          {
-            style: {
-              display: "flex",
-              justifyContent: "space-between",
-              alignItems: "flex-start",
-              gap: 16,
-              marginBottom: 18
-            },
-            children: [
-              /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
-                eyebrow ? /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    style: {
-                      color: theme.colors.textLight,
-                      fontSize: 12,
-                      fontWeight: 800,
-                      letterSpacing: "0.16em",
-                      textTransform: "uppercase"
-                    },
-                    children: eyebrow
-                  }
-                ) : null,
-                title ? /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    style: {
-                      color: theme.colors.text,
-                      fontSize: 24,
-                      fontWeight: 700,
-                      lineHeight: 1.2
-                    },
-                    children: title
-                  }
-                ) : null
-              ] }),
-              action ? /* @__PURE__ */ jsx("div", { style: { color: theme.colors.text }, children: action }) : null
-            ]
-          }
-        ),
+        (eyebrow || title || action) && /* @__PURE__ */ jsxs2("div", { className: "mb-[18px] flex items-start justify-between gap-4", children: [
+          /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-1.5", children: [
+            eyebrow ? /* @__PURE__ */ jsx("span", { className: "text-xs font-extrabold uppercase tracking-[0.16em] text-[var(--theme-textLight)]", children: eyebrow }) : null,
+            title ? /* @__PURE__ */ jsx("div", { className: "text-2xl font-bold leading-[1.2] text-[var(--theme-text)]", children: title }) : null
+          ] }),
+          action ? /* @__PURE__ */ jsx("div", { className: "text-[var(--theme-text)]", children: action }) : null
+        ] }),
         children
       ]
     }
@@ -432,29 +366,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__ */ jsxs3(
     "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: [
@@ -462,66 +392,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__ */ jsx2(
           "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__ */ jsxs3("div", { style: { display: "flex", flexDirection: "column", gap: 6, minWidth: 0 }, children: [
-          title ? /* @__PURE__ */ jsx2(
-            "div",
-            {
-              style: {
-                color: theme.colors.text,
-                fontSize: 14,
-                fontWeight: 700,
-                lineHeight: 1.25,
-                overflow: "hidden",
-                textOverflow: "ellipsis",
-                whiteSpace: "nowrap"
-              },
-              children: title
-            }
-          ) : null,
-          value ? /* @__PURE__ */ jsx2(
-            "div",
-            {
-              style: {
-                color: theme.colors.text,
-                fontSize: 18,
-                fontWeight: 800,
-                lineHeight: 1.15,
-                overflow: "hidden",
-                textOverflow: "ellipsis",
-                whiteSpace: "nowrap"
-              },
-              children: value
-            }
-          ) : null
+        /* @__PURE__ */ jsxs3("div", { className: "flex min-w-0 flex-col gap-1.5", children: [
+          title ? /* @__PURE__ */ jsx2("div", { className: "truncate text-sm font-bold leading-[1.25] text-[var(--theme-text)]", children: title }) : null,
+          value ? /* @__PURE__ */ jsx2("div", { className: "truncate text-[18px] font-extrabold leading-[1.15] text-[var(--theme-text)]", children: value }) : null
         ] })
       ]
     }
@@ -529,12 +417,17 @@ function CardSmall({
 }
 
 // src/components/Checkbox.tsx
-import { useEffect, useId, useRef, useState as useState2 } from "react";
+import { useEffect as useEffect2, useId, useRef, useState } from "react";
 import { jsx as jsx3, jsxs as jsxs4 } from "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) => {
@@ -623,7 +516,6 @@ function Checkbox({
   ...rest
 }) {
   const { theme, mutedText } = useUiKitTheme();
-  const controlMetrics = getControlMetrics(controlSize);
   const indicatorSize = getCheckboxSize(controlSize);
   const hasLabel = hasNodeContent(label);
   const hasHint = hasNodeContent(hint);
@@ -631,11 +523,11 @@ function Checkbox({
   const hasSecondaryContent = hasLabel && hasHint;
   const resolvedId = id != null ? id : `ss-checkbox-${useId().replace(/:/g, "")}`;
   const inputRef = useRef(null);
-  const [isFocused, setIsFocused] = useState2(false);
-  const [internalChecked, setInternalChecked] = useState2(Boolean(defaultChecked));
+  const [isFocused, setIsFocused] = useState(false);
+  const [internalChecked, setInternalChecked] = useState(Boolean(defaultChecked));
   const isControlled = checked !== void 0;
   const resolvedChecked = isControlled ? Boolean(checked) : internalChecked;
-  useEffect(() => {
+  useEffect2(() => {
     if (!inputRef.current) {
       return;
     }
@@ -644,43 +536,28 @@ function Checkbox({
   return /* @__PURE__ */ jsx3(
     "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__ */ jsxs4(
         "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__ */ jsxs4(
               "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__ */ jsx3(
                     "input",
@@ -706,15 +583,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__ */ jsx3(
@@ -736,52 +608,17 @@ function Checkbox({
             hasLabel || hasHint || hasError ? /* @__PURE__ */ jsxs4(
               "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__ */ jsxs4(
-                    "span",
-                    {
-                      style: {
-                        color: theme.colors.text,
-                        fontSize: controlMetrics.fontSize,
-                        lineHeight: controlMetrics.lineHeight,
-                        fontWeight: 600
-                      },
-                      children: [
-                        label,
-                        required ? /* @__PURE__ */ jsx3("span", { style: { color: theme.colors.negative, marginLeft: 4 }, children: "*" }) : null
-                      ]
-                    }
-                  ) : null,
-                  hint ? /* @__PURE__ */ jsx3(
-                    "span",
-                    {
-                      style: {
-                        color: mutedText,
-                        fontSize: 13,
-                        lineHeight: 1.45
-                      },
-                      children: hint
-                    }
-                  ) : null,
-                  error ? /* @__PURE__ */ jsx3(
-                    "span",
-                    {
-                      style: {
-                        color: theme.colors.negative,
-                        fontSize: 13,
-                        lineHeight: 1.45,
-                        fontWeight: 600
-                      },
-                      children: error
-                    }
-                  ) : null
+                  label ? /* @__PURE__ */ jsxs4("span", { className: cx("font-semibold text-[var(--theme-text)]", CHECKBOX_LABEL_CLASSNAMES[controlSize]), children: [
+                    label,
+                    required ? /* @__PURE__ */ jsx3("span", { className: "ml-1 text-[var(--theme-negative)]", children: "*" }) : null
+                  ] }) : null,
+                  hint ? /* @__PURE__ */ jsx3("span", { className: "text-[13px] leading-[1.45] text-[var(--ui-kit-muted-text)]", children: hint }) : null,
+                  error ? /* @__PURE__ */ jsx3("span", { className: "text-[13px] font-semibold leading-[1.45] text-[var(--theme-negative)]", children: error }) : null
                 ]
               }
             ) : null
@@ -796,19 +633,8 @@ function Checkbox({
 import { useMemo as useMemo3 } from "react";
 
 // src/components/Modal.tsx
-import { useEffect as useEffect2, useMemo as useMemo2, useState as useState3 } from "react";
+import { useEffect as useEffect3, useMemo as useMemo2, useState as useState2 } from "react";
 import { jsx as jsx4, jsxs as jsxs5 } from "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);
 };
@@ -859,7 +685,6 @@ function ModalActionButton({
   theme
 }) {
   var _a, _b;
-  const { colors } = theme;
   const {
     label,
     onClick,
@@ -867,54 +692,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__ */ jsx4(
     "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
       },
@@ -924,7 +719,8 @@ function ModalActionButton({
           type: "button",
           onClick: disabled ? void 0 : onClick,
           disabled,
-          style: buttonStyle,
+          className: buttonClassName,
+          style: { opacity: disabled ? DISABLED_COMPONENT_OPACITY : 1 },
           children: label
         }
       )
@@ -939,19 +735,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__ */ jsx4("span", { style: srOnlyStyle, children: "Loading" }),
+        /* @__PURE__ */ jsx4("span", { className: "ui-kit-sr-only", children: "Loading" }),
         /* @__PURE__ */ jsxs5("svg", { "aria-hidden": "true", width: "32", height: "32", viewBox: "0 0 40 40", fill: "none", children: [
           /* @__PURE__ */ jsx4(
             "circle",
@@ -988,6 +778,33 @@ function ModalBusyIndicator({
     }
   );
 }
+function MaximizeIcon() {
+  return /* @__PURE__ */ jsx4("svg", { "aria-hidden": "true", width: "15", height: "15", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx4("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__ */ jsxs5("svg", { "aria-hidden": "true", width: "15", height: "15", viewBox: "0 0 20 20", fill: "none", children: [
+    /* @__PURE__ */ jsx4(
+      "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__ */ jsx4(
+      "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,
@@ -1018,10 +835,25 @@ function UnifiedModal({
     return `0 34px 80px ${withAlpha(modalTheme.theme.colors.shadow, 0.28)}`;
   }, [modalTheme.theme.colors.shadow]);
   const controlShadow = useMemo2(() => getComponentShadow(modalTheme.theme), [modalTheme.theme]);
-  const [isMaximized, setIsMaximized] = useState3(maximized != null ? maximized : false);
+  const modalVariables = useMemo2(() => ({
+    "--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] = useState2(maximized != null ? maximized : false);
   const titleId = useMemo2(() => createTitleId(title), [title]);
   const shouldDisableDismiss = disableDismiss || isBusy;
-  useEffect2(() => {
+  useEffect3(() => {
     if (typeof maximized === "boolean") {
       setIsMaximized(maximized);
       return;
@@ -1030,7 +862,7 @@ function UnifiedModal({
       setIsMaximized(true);
     }
   }, [maximized]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!isOpen || typeof window === "undefined" || typeof document === "undefined") {
       return;
     }
@@ -1054,13 +886,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;
@@ -1125,62 +951,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__ */ jsxs5(
         "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__ */ jsxs5(
               "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__ */ jsx4(
                     "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__ */ jsxs5("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+                  /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2", children: [
                     !hideExpandButton ? /* @__PURE__ */ jsx4(
                       "button",
                       {
@@ -1188,19 +1001,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__ */ jsx4(MinimizeIcon, {}) : /* @__PURE__ */ jsx4(MaximizeIcon, {})
                       }
                     ) : null,
                     !hideCloseButton ? /* @__PURE__ */ jsx4(
@@ -1209,18 +1012,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"
                       }
@@ -1232,39 +1032,23 @@ function UnifiedModal({
             /* @__PURE__ */ jsxs5(
               "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__ */ jsx4(
                     "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__ */ jsx4(
                     "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__ */ jsx4(ModalBusyIndicator, { theme: modalTheme })
                     }
                   ) : null
@@ -1274,13 +1058,8 @@ function UnifiedModal({
             shouldRenderFooter ? /* @__PURE__ */ jsx4(
               "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
@@ -1343,12 +1122,7 @@ function ComposableModal({
   const defaultHeader = headerFallback != null ? headerFallback : /* @__PURE__ */ jsx5(
     "h2",
     {
-      style: {
-        margin: 0,
-        fontSize: 30,
-        fontWeight: 800,
-        lineHeight: 1.1
-      },
+      className: "m-0 text-[24px] font-extrabold leading-[1.1]",
       children: title
     }
   );
@@ -1386,14 +1160,14 @@ function ComposableModal({
 
 // src/components/DatePicker.tsx
 import {
-  useEffect as useEffect4,
+  useEffect as useEffect5,
   useMemo as useMemo4,
   useRef as useRef3,
-  useState as useState5
+  useState as useState4
 } from "react";
 
 // src/components/Input.tsx
-import { useEffect as useEffect3, useId as useId2, useRef as useRef2, useState as useState4 } from "react";
+import { useEffect as useEffect4, useId as useId2, useRef as useRef2, useState as useState3 } from "react";
 import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs7 } from "react/jsx-runtime";
 var PASSWORD_TOGGLE_METRICS_BY_SIZE = {
   sm: {
@@ -1403,18 +1177,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,
@@ -1426,88 +1215,40 @@ function ControlFrame({
   children,
   style
 }) {
-  const { theme, mutedText } = useUiKitTheme();
+  useUiKitTheme();
   if (!label && !hint && !error) {
     return /* @__PURE__ */ jsx6(Fragment2, { 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__ */ jsxs7("div", { style: wrapperStyle, children: [
-      label || hint ? /* @__PURE__ */ jsxs7("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [
-        label ? /* @__PURE__ */ jsxs7("label", { htmlFor, style: labelStyle, children: [
-          label,
-          required ? /* @__PURE__ */ jsx6("span", { style: { color: theme.colors.negative, marginLeft: 4 }, children: "*" }) : null
-        ] }) : null,
-        hint ? /* @__PURE__ */ jsx6(
-          "span",
+    return /* @__PURE__ */ jsxs7("div", { className: "flex w-full flex-col gap-2", style, children: [
+      label || hint ? /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-1", children: [
+        label ? /* @__PURE__ */ jsxs7(
+          "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__ */ jsx6("span", { className: "ml-1 text-[var(--theme-negative)]", children: "*" }) : null
+            ]
           }
-        ) : null
+        ) : null,
+        hint ? /* @__PURE__ */ jsx6("span", { className: "text-[13px] leading-[1.45] text-[var(--ui-kit-muted-text)]", children: hint }) : null
       ] }) : null,
       children,
-      error ? /* @__PURE__ */ jsx6(
-        "span",
-        {
-          style: {
-            color: theme.colors.negative,
-            fontSize: 13,
-            fontWeight: 600,
-            lineHeight: 1.45
-          },
-          children: error
-        }
-      ) : null
+      error ? /* @__PURE__ */ jsx6("span", { className: "text-[13px] font-semibold leading-[1.45] text-[var(--theme-negative)]", children: error }) : null
     ] });
   }
-  return /* @__PURE__ */ jsxs7("label", { htmlFor, style: wrapperStyle, children: [
-    label || hint ? /* @__PURE__ */ jsxs7("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [
-      label ? /* @__PURE__ */ jsxs7("span", { style: labelStyle, children: [
+  return /* @__PURE__ */ jsxs7("label", { htmlFor, className: "flex w-full flex-col gap-2", style, children: [
+    label || hint ? /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-1", children: [
+      label ? /* @__PURE__ */ jsxs7("span", { className: "text-sm font-bold tracking-[0.01em] text-[var(--theme-text)]", children: [
         label,
-        required ? /* @__PURE__ */ jsx6("span", { style: { color: theme.colors.negative, marginLeft: 4 }, children: "*" }) : null
+        required ? /* @__PURE__ */ jsx6("span", { className: "ml-1 text-[var(--theme-negative)]", children: "*" }) : null
       ] }) : null,
-      hint ? /* @__PURE__ */ jsx6(
-        "span",
-        {
-          style: {
-            color: mutedText,
-            fontSize: 13,
-            lineHeight: 1.45
-          },
-          children: hint
-        }
-      ) : null
+      hint ? /* @__PURE__ */ jsx6("span", { className: "text-[13px] leading-[1.45] text-[var(--ui-kit-muted-text)]", children: hint }) : null
     ] }) : null,
     children,
-    error ? /* @__PURE__ */ jsx6(
-      "span",
-      {
-        style: {
-          color: theme.colors.negative,
-          fontSize: 13,
-          fontWeight: 600,
-          lineHeight: 1.45
-        },
-        children: error
-      }
-    ) : null
+    error ? /* @__PURE__ */ jsx6("span", { className: "text-[13px] font-semibold leading-[1.45] text-[var(--theme-negative)]", children: error }) : null
   ] });
 }
 function Input({
@@ -1515,6 +1256,7 @@ function Input({
   hint,
   error,
   controlSize = "sm",
+  className,
   showPasswordToggle = true,
   fileButtonLabel,
   id,
@@ -1525,49 +1267,27 @@ function Input({
   type = "text",
   ...rest
 }) {
-  const { theme } = useUiKitTheme();
+  useUiKitTheme();
   const controlMetrics = getControlMetrics(controlSize);
-  const componentShadow = getComponentShadow(theme);
   const passwordToggleMetrics = getPasswordToggleMetrics(controlSize);
   const generatedId = useId2();
   const inputId = id != null ? id : generatedId;
   const fileInputRef = useRef2(null);
-  const [isPasswordVisible, setIsPasswordVisible] = useState4(false);
-  const [selectedFileNames, setSelectedFileNames] = useState4([]);
+  const [isPasswordVisible, setIsPasswordVisible] = useState3(false);
+  const [selectedFileNames, setSelectedFileNames] = useState3([]);
   const isPasswordField = type === "password";
   const isEmailField = type === "email";
   const isFileField = type === "file";
   const canTogglePasswordVisibility = isPasswordField && showPasswordToggle;
   const resolvedType = canTogglePasswordVisibility ? isPasswordVisible ? "text" : "password" : type;
-  useEffect3(() => {
+  useEffect4(() => {
     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`;
@@ -1575,144 +1295,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) {
@@ -1743,82 +1351,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__ */ jsxs7("div", { style: fileFieldStyle, children: [
-      /* @__PURE__ */ jsxs7(
-        "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__ */ jsx6("span", { style: fileIconStyle, "aria-hidden": "true", children: /* @__PURE__ */ jsx6("svg", { width: fileIconSize, height: fileIconSize, viewBox: "0 0 20 20", fill: "none", children: hasSelectedFiles ? /* @__PURE__ */ jsxs7(Fragment2, { children: [
-              /* @__PURE__ */ jsx6(
-                "path",
-                {
-                  d: "M5.5 6.25h9",
-                  stroke: "currentColor",
-                  strokeWidth: "1.6",
-                  strokeLinecap: "round"
-                }
-              ),
-              /* @__PURE__ */ jsx6(
-                "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__ */ jsx6(
-                "path",
-                {
-                  d: "M7.75 8.25v5.5",
-                  stroke: "currentColor",
-                  strokeWidth: "1.6",
-                  strokeLinecap: "round"
-                }
-              ),
-              /* @__PURE__ */ jsx6(
-                "path",
-                {
-                  d: "M10 8.25v5.5",
-                  stroke: "currentColor",
-                  strokeWidth: "1.6",
-                  strokeLinecap: "round"
-                }
+    /* @__PURE__ */ jsxs7(
+      "div",
+      {
+        className: cx(
+          adornedFieldClassName,
+          disabled ? "cursor-not-allowed" : "cursor-pointer",
+          className
+        ),
+        style: { boxShadow: adornedFieldBoxShadow, ...style },
+        children: [
+          /* @__PURE__ */ jsxs7(
+            "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__ */ jsx6(
-                "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__ */ jsx6(
+                  "span",
+                  {
+                    className: cx(
+                      "inline-flex shrink-0 items-center justify-center",
+                      adornmentColorClassName
+                    ),
+                    "aria-hidden": "true",
+                    children: /* @__PURE__ */ jsx6("svg", { width: fileIconSize, height: fileIconSize, viewBox: "0 0 20 20", fill: "none", children: hasSelectedFiles ? /* @__PURE__ */ jsxs7(Fragment2, { children: [
+                      /* @__PURE__ */ jsx6(
+                        "path",
+                        {
+                          d: "M5.5 6.25h9",
+                          stroke: "currentColor",
+                          strokeWidth: "1.6",
+                          strokeLinecap: "round"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx6(
+                        "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__ */ jsx6(
+                        "path",
+                        {
+                          d: "M7.75 8.25v5.5",
+                          stroke: "currentColor",
+                          strokeWidth: "1.6",
+                          strokeLinecap: "round"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx6(
+                        "path",
+                        {
+                          d: "M10 8.25v5.5",
+                          stroke: "currentColor",
+                          strokeWidth: "1.6",
+                          strokeLinecap: "round"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx6(
+                        "path",
+                        {
+                          d: "M12.25 8.25v5.5",
+                          stroke: "currentColor",
+                          strokeWidth: "1.6",
+                          strokeLinecap: "round"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx6(
+                        "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__ */ jsxs7(Fragment2, { children: [
+                      /* @__PURE__ */ jsx6(
+                        "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__ */ jsx6(
+                        "path",
+                        {
+                          d: "M11.875 2.75V6.25H15.375",
+                          stroke: "currentColor",
+                          strokeWidth: "1.6",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx6(
+                        "path",
+                        {
+                          d: "M7.5 10h5",
+                          stroke: "currentColor",
+                          strokeWidth: "1.6",
+                          strokeLinecap: "round"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx6(
+                        "path",
+                        {
+                          d: "M7.5 13h5",
+                          stroke: "currentColor",
+                          strokeWidth: "1.6",
+                          strokeLinecap: "round"
+                        }
+                      )
+                    ] }) })
+                  }
+                ),
+                showUploadLabel ? fileButtonLabel : null
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx6(
+            "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__ */ jsx6(
-                "path",
+              children: fileSelectionText ? /* @__PURE__ */ jsx6(
+                "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__ */ jsxs7(Fragment2, { children: [
+              ) : null
+            }
+          )
+        ]
+      }
+    )
+  ] }) : isEmailField ? /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      className: cx(adornedFieldClassName, className),
+      style: { boxShadow: adornedFieldBoxShadow, ...style },
+      children: [
+        /* @__PURE__ */ jsx6(
+          "span",
+          {
+            className: cx(
+              "inline-flex shrink-0 self-stretch items-center justify-center bg-transparent",
+              adornmentColorClassName
+            ),
+            style: { width: emailAdornmentWidth },
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsxs7("svg", { width: fileIconSize, height: fileIconSize, viewBox: "0 0 20 20", fill: "none", children: [
               /* @__PURE__ */ jsx6(
                 "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",
@@ -1828,165 +1555,160 @@ function Input({
               /* @__PURE__ */ jsx6(
                 "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__ */ jsx6(
-                "path",
-                {
-                  d: "M7.5 10h5",
-                  stroke: "currentColor",
-                  strokeWidth: "1.6",
-                  strokeLinecap: "round"
-                }
-              ),
-              /* @__PURE__ */ jsx6(
-                "path",
-                {
-                  d: "M7.5 13h5",
-                  stroke: "currentColor",
-                  strokeWidth: "1.6",
-                  strokeLinecap: "round"
-                }
               )
-            ] }) }) }),
-            showUploadLabel ? fileButtonLabel : null
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx6(
-        "button",
-        {
-          type: "button",
-          disabled,
-          "aria-controls": inputId,
-          "aria-label": rest.multiple ? "Select files" : "Select file",
-          onClick: openFilePicker,
-          style: fileSelectionStyle,
-          children: fileSelectionText ? /* @__PURE__ */ jsx6("span", { style: fileSelectionTextStyle, children: fileSelectionText }) : null
-        }
-      )
-    ] })
-  ] }) : isEmailField ? /* @__PURE__ */ jsxs7("div", { style: emailFieldStyle, children: [
-    /* @__PURE__ */ jsx6("span", { style: emailAdornmentStyle, "aria-hidden": "true", children: /* @__PURE__ */ jsxs7("svg", { width: fileIconSize, height: fileIconSize, viewBox: "0 0 20 20", fill: "none", children: [
-      /* @__PURE__ */ jsx6(
-        "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__ */ jsx6(
-        "path",
-        {
-          d: "M4.375 6.25 10 10.625l5.625-4.375",
-          stroke: "currentColor",
-          strokeWidth: "1.6",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        }
-      )
-    ] }) }),
-    /* @__PURE__ */ jsx6("input", { ...rest, id: inputId, placeholder, type: resolvedType, disabled, onChange, style: emailInputStyle })
-  ] }) : canTogglePasswordVisibility ? /* @__PURE__ */ jsxs7("div", { style: passwordFieldStyle, children: [
-    /* @__PURE__ */ jsx6(
-      "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__ */ jsxs7(
-          "svg",
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx6(
+          "input",
           {
-            width: passwordLockIconSize,
-            height: passwordLockIconSize,
-            viewBox: "0 0 20 20",
-            fill: "none",
-            "aria-hidden": "true",
-            children: [
-              /* @__PURE__ */ jsx6(
-                "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__ */ jsx6(
-                "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__ */ jsx6(
-                "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__ */ jsxs7(
-          "svg",
+        )
+      ]
+    }
+  ) : canTogglePasswordVisibility ? /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      className: cx(adornedFieldClassName, className),
+      style: { boxShadow: adornedFieldBoxShadow, ...style },
+      children: [
+        /* @__PURE__ */ jsx6(
+          "button",
           {
-            width: passwordLockIconSize,
-            height: passwordLockIconSize,
-            viewBox: "0 0 20 20",
-            fill: "none",
-            "aria-hidden": "true",
-            children: [
-              /* @__PURE__ */ jsx6(
-                "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__ */ jsx6(
-                "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__ */ jsx6("path", { d: "M10 11.25v1.5", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" })
-            ]
+            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__ */ jsxs7(
+              "svg",
+              {
+                width: passwordLockIconSize,
+                height: passwordLockIconSize,
+                viewBox: "0 0 20 20",
+                fill: "none",
+                "aria-hidden": "true",
+                children: [
+                  /* @__PURE__ */ jsx6(
+                    "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__ */ jsx6(
+                    "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__ */ jsx6(
+                    "path",
+                    {
+                      d: "M10 11.25v1.5",
+                      stroke: "currentColor",
+                      strokeWidth: "1.8",
+                      strokeLinecap: "round"
+                    }
+                  )
+                ]
+              }
+            ) : /* @__PURE__ */ jsxs7(
+              "svg",
+              {
+                width: passwordLockIconSize,
+                height: passwordLockIconSize,
+                viewBox: "0 0 20 20",
+                fill: "none",
+                "aria-hidden": "true",
+                children: [
+                  /* @__PURE__ */ jsx6(
+                    "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__ */ jsx6(
+                    "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__ */ jsx6("path", { d: "M10 11.25v1.5", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" })
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx6(
+          "input",
+          {
+            ...rest,
+            id: inputId,
+            placeholder,
+            type: resolvedType,
+            disabled,
+            onChange,
+            className: cx(adornedInputClassName, className),
+            style: { padding: `0 ${controlMetrics.paddingX}px 0 ${leadingContentGap}px` }
           }
         )
-      }
-    ),
-    /* @__PURE__ */ jsx6("input", { ...rest, id: inputId, placeholder, type: resolvedType, disabled, onChange, style: passwordInputStyle })
-  ] }) : /* @__PURE__ */ jsx6("input", { ...rest, id: inputId, placeholder, type: resolvedType, disabled, onChange, style: inputStyle });
+      ]
+    }
+  ) : /* @__PURE__ */ jsx6(
+    "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__ */ jsx6(
     ControlFrame,
     {
@@ -2050,20 +1772,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");
 }
@@ -2247,13 +1984,13 @@ function DatePicker({
   ...rest
 }) {
   var _a;
-  const { theme, focusRing } = useUiKitTheme();
+  useUiKitTheme();
   const controlMetrics = getControlMetrics(controlSize);
   const accessoryMetrics = ACCESSORY_METRICS_BY_SIZE[controlSize];
   const generatedIdRef = useRef3();
   const visibleInputRef = useRef3(null);
   const nativeInputRef = useRef3(null);
-  const [internalError, setInternalError] = useState5();
+  const [internalError, setInternalError] = useState4();
   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";
@@ -2265,19 +2002,19 @@ function DatePicker({
     const parsedDefaultValue = parseDateValue(defaultValue, mode, resolvedFormat);
     return parsedDefaultValue ? toLocalInputValue(parsedDefaultValue, mode) : null;
   }, [defaultValue, mode, resolvedFormat]);
-  const [uncontrolledValue, setUncontrolledValue] = useState5(normalizedDefaultValue);
+  const [uncontrolledValue, setUncontrolledValue] = useState4(normalizedDefaultValue);
   const committedDate = useMemo4(() => {
     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] = useState5(committedDisplayValue);
-  useEffect4(() => {
+  const [draftValue, setDraftValue] = useState4(committedDisplayValue);
+  useEffect5(() => {
     setDraftValue(committedDisplayValue);
     setInternalError(void 0);
   }, [committedDisplayValue]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!isControlled) {
       setUncontrolledValue((currentValue) => {
         if (currentValue == null) {
@@ -2303,7 +2040,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;
@@ -2314,6 +2050,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)}.`;
@@ -2410,98 +2182,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,
@@ -2563,33 +2247,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__ */ jsx7(
     "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__ */ jsx7(
         "button",
         {
@@ -2604,34 +2269,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__ */ jsx7(ClearIcon, { size: accessoryMetrics.iconSize })
         }
       )
     }
   ) : null;
-  const input = showPickerAdornment ? /* @__PURE__ */ jsxs8("div", { style: integratedFieldStyle, children: [
+  const input = showPickerAdornment ? /* @__PURE__ */ jsxs8(
+    "div",
+    {
+      className: cx(integratedFieldClassName, className),
+      style: {
+        boxShadow: integratedFieldBoxShadow,
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsx7(
+          "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__ */ jsx7(CalendarIcon, { size: accessoryMetrics.iconSize })
+          }
+        ),
+        /* @__PURE__ */ jsxs8("div", { className: "relative h-full min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx7(
+            "input",
+            {
+              ...visibleInputProps,
+              className: cx(integratedInputClassName, className),
+              style: {
+                padding: `${controlMetrics.paddingY}px ${controlMetrics.paddingX + trailingInset}px ${controlMetrics.paddingY}px ${leadingContentGap}px`
+              }
+            }
+          ),
+          nativePickerInput,
+          clearButtonCluster
+        ] })
+      ]
+    }
+  ) : /* @__PURE__ */ jsxs8("div", { className: "relative w-full", children: [
     /* @__PURE__ */ jsx7(
-      "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__ */ jsx7(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__ */ jsxs8("div", { style: integratedInputWrapStyle, children: [
-      /* @__PURE__ */ jsx7("input", { ...visibleInputProps, style: integratedTextInputStyle }),
-      nativePickerInput,
-      clearButtonCluster
-    ] })
-  ] }) : /* @__PURE__ */ jsxs8("div", { style: { position: "relative", width: "100%" }, children: [
-    /* @__PURE__ */ jsx7("input", { ...visibleInputProps, style: inputStyle }),
     nativePickerInput,
     clearButtonCluster
   ] });
@@ -2654,28 +2351,40 @@ 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__ */ jsx8("div", { ...rest, role: "separator", "aria-orientation": orientation, style: separatorStyle });
+  return /* @__PURE__ */ jsx8(
+    "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
 import {
-  useEffect as useEffect5,
+  useEffect as useEffect6,
   useId as useId3,
+  useMemo as useMemo5,
   useRef as useRef4,
-  useState as useState6
+  useState as useState5
 } from "react";
 
 // src/componentsBase/select/utils.ts
@@ -2728,10 +2437,20 @@ function filterSelectGroups(groups, query) {
 import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs9 } from "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,
@@ -2771,7 +2490,7 @@ 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 = useId3().replace(/:/g, "");
   const resolvedId = id != null ? id : `ss-select-${generatedId}`;
@@ -2781,12 +2500,12 @@ 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] = useState6(fallbackValues);
-  const [isOpen, setIsOpen] = useState6(false);
-  const [uncontrolledSearchQuery, setUncontrolledSearchQuery] = useState6("");
-  const [menuPlacement, setMenuPlacement] = useState6("bottom");
-  const [isPlacementResolved, setIsPlacementResolved] = useState6(false);
-  const [highlightedValue, setHighlightedValue] = useState6((_d = (_c = fallbackValues[0]) != null ? _c : (_b = enabledOptions[0]) == null ? void 0 : _b.value) != null ? _d : "");
+  const [uncontrolledValues, setUncontrolledValues] = useState5(fallbackValues);
+  const [isOpen, setIsOpen] = useState5(false);
+  const [uncontrolledSearchQuery, setUncontrolledSearchQuery] = useState5("");
+  const [menuPlacement, setMenuPlacement] = useState5("bottom");
+  const [isPlacementResolved, setIsPlacementResolved] = useState5(false);
+  const [highlightedValue, setHighlightedValue] = useState5((_d = (_c = fallbackValues[0]) != null ? _c : (_b = enabledOptions[0]) == null ? void 0 : _b.value) != null ? _d : "");
   const shellRef = useRef4(null);
   const buttonRef = useRef4(null);
   const menuRef = useRef4(null);
@@ -2818,13 +2537,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-"))
   );
-  useEffect5(() => {
+  const selectVariables = useMemo5(() => ({
+    "--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"
+  );
+  useEffect6(() => {
     var _a2, _b2, _c2, _d2;
     if (isControlled || preserveUnknownValues) {
       return;
@@ -2841,7 +2596,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]);
-  useEffect5(() => {
+  useEffect6(() => {
     var _a2, _b2, _c2;
     if (!isOpen) {
       highlightSyncKeyRef.current = "";
@@ -2857,14 +2612,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]);
-  useEffect5(() => {
+  useEffect6(() => {
     var _a2;
     if (!isOpen || !hasFilter) {
       return;
     }
     (_a2 = searchInputRef.current) == null ? void 0 : _a2.focus();
   }, [hasFilter, isOpen]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!isOpen) {
       return;
     }
@@ -2889,7 +2644,7 @@ function SelectBase({
       window.cancelAnimationFrame(frameId);
     };
   }, [isOpen, visibleOptions.length]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (isOpen || !clearSearchOnClose || currentSearchQuery === "") {
       return;
     }
@@ -2898,7 +2653,7 @@ function SelectBase({
     }
     onSearchQueryChange == null ? void 0 : onSearchQueryChange("");
   }, [clearSearchOnClose, currentSearchQuery, isOpen, onSearchQueryChange, searchQuery]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!isOpen) {
       return;
     }
@@ -2914,7 +2669,7 @@ function SelectBase({
       document.removeEventListener("pointerdown", handlePointerDown);
     };
   }, [isOpen]);
-  useEffect5(() => {
+  useEffect6(() => {
     var _a2;
     if (isControlled) {
       return;
@@ -3029,20 +2784,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__ */ jsx9(
         CheckboxIndicator,
         {
@@ -3196,7 +2941,7 @@ function SelectBase({
       htmlFor: resolvedId,
       required: rest.required,
       useLabelWrapper: false,
-      children: /* @__PURE__ */ jsxs9("div", { ref: shellRef, style: { position: "relative", width: "100%" }, children: [
+      children: /* @__PURE__ */ jsxs9("div", { ref: shellRef, className: "relative w-full", style: selectVariables, children: [
         /* @__PURE__ */ jsxs9(
           "button",
           {
@@ -3204,7 +2949,7 @@ function SelectBase({
             id: resolvedId,
             ref: buttonRef,
             type: "button",
-            className,
+            className: cx(triggerClassName, className),
             title: rest.title,
             disabled: disabled || !canOpenMenu,
             autoFocus,
@@ -3220,42 +2965,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__ */ jsx9(
                 "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
                 }
               ),
@@ -3263,18 +2981,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__ */ jsx9("svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx9(
                     "path",
@@ -3304,17 +3018,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
           }
         ),
@@ -3322,7 +3026,7 @@ function SelectBase({
           /* @__PURE__ */ jsx9("style", { children: `
                 #${listboxId} {
                   scrollbar-width: thin;
-                  scrollbar-color: ${scrollbarThumbColor} transparent;
+                  scrollbar-color: var(--ui-kit-select-scrollbar-thumb) transparent;
                 }
 
                 #${listboxId}::-webkit-scrollbar {
@@ -3334,19 +3038,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;
                 }
               ` }),
@@ -3354,40 +3058,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__ */ jsxs9(
                   "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__ */ jsx9(
@@ -3410,20 +3095,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)"
                           }
                         }
                       )
@@ -3432,14 +3107,8 @@ function SelectBase({
                 ) : isMultiSelect ? /* @__PURE__ */ jsx9(
                   "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,
@@ -3451,44 +3120,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__ */ jsx9(
                       "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__ */ jsxs9(
                       "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__ */ jsx9(
                             "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,
@@ -3520,33 +3167,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__ */ jsxs9(
                                     "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__ */ jsx9(
                                           CheckboxIndicator,
@@ -3554,23 +3190,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__ */ jsx9(
                                           "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
                                           }
                                         )
@@ -3581,13 +3210,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__ */ jsx9("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx9(
                                         "path",
                                         {
@@ -3614,11 +3237,8 @@ function SelectBase({
                 menuFooter ? /* @__PURE__ */ jsx9(
                   "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
@@ -3708,7 +3328,7 @@ function Select({ children, ...props }) {
 }
 
 // src/components/SelectAsync.tsx
-import { useEffect as useEffect6, useMemo as useMemo5, useRef as useRef5, useState as useState7 } from "react";
+import { useEffect as useEffect7, useMemo as useMemo6, useRef as useRef5, useState as useState6 } from "react";
 
 // src/componentsBase/select/objectOptionsAdapter.tsx
 import { jsx as jsx11 } from "react/jsx-runtime";
@@ -3811,19 +3431,19 @@ function SelectAsync({
   ...props
 }) {
   var _a;
-  const { theme, mutedText } = useUiKitTheme();
+  useUiKitTheme();
   const isMultiSelect = Boolean(isMulti);
   const isControlled = value !== void 0;
-  const [internalSelectedOptions, setInternalSelectedOptions] = useState7(() => {
+  const [internalSelectedOptions, setInternalSelectedOptions] = useState6(() => {
     return normalizeAsyncValue(defaultValue, isMultiSelect);
   });
-  const [remoteOptions, setRemoteOptions] = useState7(defaultOptions);
-  const [searchQuery, setSearchQuery] = useState7("");
-  const [nextPage, setNextPage] = useState7(1);
-  const [hasMore, setHasMore] = useState7(true);
-  const [isInitialLoading, setIsInitialLoading] = useState7(false);
-  const [isLoadingMore, setIsLoadingMore] = useState7(false);
-  const [loadError, setLoadError] = useState7(null);
+  const [remoteOptions, setRemoteOptions] = useState6(defaultOptions);
+  const [searchQuery, setSearchQuery] = useState6("");
+  const [nextPage, setNextPage] = useState6(1);
+  const [hasMore, setHasMore] = useState6(true);
+  const [isInitialLoading, setIsInitialLoading] = useState6(false);
+  const [isLoadingMore, setIsLoadingMore] = useState6(false);
+  const [loadError, setLoadError] = useState6(null);
   const selectedOptions = isControlled ? normalizeAsyncValue(value, isMultiSelect) : internalSelectedOptions;
   const optionLookupRef = useRef5(/* @__PURE__ */ new Map());
   const loadOptionsRef = useRef5(loadOptions);
@@ -3833,7 +3453,7 @@ function SelectAsync({
   const activeControllerRef = useRef5(null);
   loadOptionsRef.current = loadOptions;
   remoteOptionsRef.current = remoteOptions;
-  const mergedOptions = useMemo5(() => {
+  const mergedOptions = useMemo6(() => {
     const baseOptions = dedupeSelectObjectOptions([
       ...fixedOptions,
       ...remoteOptions
@@ -3844,20 +3464,20 @@ function SelectAsync({
     });
     return [...baseOptions, ...missingSelectedOptions];
   }, [fixedOptions, remoteOptions, selectedOptions]);
-  useEffect6(() => {
+  useEffect7(() => {
     const nextLookup = /* @__PURE__ */ new Map();
     mergedOptions.forEach((option) => {
       nextLookup.set(getSelectObjectOptionKey(option), option);
     });
     optionLookupRef.current = nextLookup;
   }, [mergedOptions]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (isControlled) {
       return;
     }
     setInternalSelectedOptions(normalizeAsyncValue(defaultValue, isMultiSelect));
   }, [defaultValue, isControlled, isMultiSelect]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (areUnknownArraysEqual(cacheUniqsRef.current, cacheUniqs)) {
       return;
     }
@@ -3868,7 +3488,7 @@ function SelectAsync({
     setHasMore(true);
     setLoadError(null);
   }, [cacheUniqs, defaultOptions]);
-  useEffect6(() => {
+  useEffect7(() => {
     const timeoutId = window.setTimeout(() => {
       var _a2;
       requestVersionRef.current += 1;
@@ -3909,7 +3529,7 @@ function SelectAsync({
       window.clearTimeout(timeoutId);
     };
   }, [loadErrorMessage, searchDebounceMs, searchQuery, ...cacheUniqs]);
-  useEffect6(() => {
+  useEffect7(() => {
     return () => {
       var _a2;
       (_a2 = activeControllerRef.current) == null ? void 0 : _a2.abort();
@@ -3970,28 +3590,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__ */ jsx12("span", { children: isLoadingMore ? loadingMoreMessage : hasMore ? loadMoreHintMessage : null }),
         isLoadingMore ? /* @__PURE__ */ jsx12(
           "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
       ]
@@ -4025,10 +3632,10 @@ function SelectAsync({
 }
 
 // src/components/Table.tsx
-import { useEffect as useEffect8, useMemo as useMemo6, useState as useState9 } from "react";
+import { useEffect as useEffect9, useMemo as useMemo7, useState as useState8 } from "react";
 
 // src/componentsBase/table/TableBase.tsx
-import { useEffect as useEffect7, useId as useId4, useRef as useRef6, useState as useState8 } from "react";
+import { useEffect as useEffect8, useId as useId4, useRef as useRef6, useState as useState7 } from "react";
 
 // src/componentsBase/table/utils.ts
 import { isValidElement as isValidElement3 } from "react";
@@ -4480,9 +4087,9 @@ function DoubleChevronIcon({ direction }) {
   ] });
 }
 function OverflowMenu({ label, children, buttonStyle, menuStyle }) {
-  const [isOpen, setIsOpen] = useState8(false);
+  const [isOpen, setIsOpen] = useState7(false);
   const containerRef = useRef6(null);
-  useEffect7(() => {
+  useEffect8(() => {
     if (!isOpen) {
       return;
     }
@@ -4552,8 +4159,8 @@ function TableBase({
   const componentShadow = getComponentShadow(theme);
   const scrollRegionId = useId4().replace(/:/g, "");
   const containerRef = useRef6(null);
-  const [containerWidth, setContainerWidth] = useState8(null);
-  const [isSettingsModalOpen, setIsSettingsModalOpen] = useState8(false);
+  const [containerWidth, setContainerWidth] = useState7(null);
+  const [isSettingsModalOpen, setIsSettingsModalOpen] = useState7(false);
   const resolvedLabels = mergeTableLabels({
     ...labels != null ? labels : {},
     ...translations != null ? translations : {}
@@ -4595,7 +4202,7 @@ function TableBase({
     boxShadow: stickyActionsColumnShadow,
     borderLeft: `1px solid ${borderSoft}`
   });
-  useEffect7(() => {
+  useEffect8(() => {
     const element = containerRef.current;
     if (!element) {
       return;
@@ -4810,31 +4417,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__ */ jsxs11("div", { style: { display: "flex", flexWrap: "wrap", alignItems: "center", justifyContent: "space-between", gap: 12, minWidth: 0 }, children: [
+        shouldRenderToolbar ? /* @__PURE__ */ jsxs11("div", { className: "flex min-w-0 flex-wrap items-center justify-between gap-3", children: [
           shouldRenderToolbarPrimaryGroup ? /* @__PURE__ */ jsxs11(
             "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"
               },
@@ -4847,11 +4442,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,
@@ -4872,19 +4468,12 @@ function TableBase({
           shouldShowToolbarStatus ? /* @__PURE__ */ jsxs11(
             "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__ */ jsx13("span", { style: { color: mutedText, fontSize: 13, fontWeight: 600 }, children: resolvedLabels.loadingMessage }) : null,
-                !loading && error && hasRows ? /* @__PURE__ */ jsxs11("div", { style: { display: "inline-flex", alignItems: "center", gap: 10 }, children: [
-                  /* @__PURE__ */ jsx13("span", { style: { color: theme.colors.negative, fontSize: 13, fontWeight: 600 }, children: resolvedLabels.errorMessage }),
+                loading ? /* @__PURE__ */ jsx13("span", { className: "text-[13px] font-semibold text-[var(--ui-kit-muted-text)]", children: resolvedLabels.loadingMessage }) : null,
+                !loading && error && hasRows ? /* @__PURE__ */ jsxs11("div", { className: "inline-flex items-center gap-2.5", children: [
+                  /* @__PURE__ */ jsx13("span", { className: "text-[13px] font-semibold text-[var(--theme-negative)]", children: resolvedLabels.errorMessage }),
                   onRetry ? /* @__PURE__ */ jsx13(Button, { size: "sm", variant: "ghost", onClick: onRetry, children: resolvedLabels.retryLabel }) : null
                 ] }) : null
               ]
@@ -4892,7 +4481,7 @@ function TableBase({
           ) : null
         ] }) : null,
         !hasRows && (!loading || error) ? renderEmptyState() : null,
-        hasRows ? isCollapsed ? /* @__PURE__ */ jsx13("div", { role: "list", "aria-label": ariaLabel, style: { display: "flex", flexDirection: "column", gap: 14 }, children: items.map((item, rowIndex) => {
+        hasRows ? isCollapsed ? /* @__PURE__ */ jsx13("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__ */ jsxs11(
@@ -5038,18 +4627,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__ */ jsxs11("table", { style: { width: "max-content", maxWidth: "none", minWidth: "100%", borderCollapse: "separate", borderSpacing: 0 }, children: [
+              children: /* @__PURE__ */ jsxs11("table", { className: "min-w-full max-w-none border-separate border-spacing-0", style: { width: "max-content" }, children: [
                 /* @__PURE__ */ jsx13("thead", { children: /* @__PURE__ */ jsxs11("tr", { children: [
                   desktopColumns.map((column, columnIndex) => {
                     var _a, _b;
@@ -5135,17 +4718,10 @@ function TableBase({
         hasRows && shouldRenderFooter ? /* @__PURE__ */ jsxs11(
           "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__ */ jsxs11("div", { style: { display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }, children: [
-                /* @__PURE__ */ jsx13("span", { style: { color: mutedText, fontSize: 13, marginRight: 4 }, children: resolvedLabels.pageLabel(normalizedPage, totalPages) }),
+              shouldShowPaginationControls ? /* @__PURE__ */ jsxs11("div", { className: "flex flex-wrap items-center gap-2", children: [
+                /* @__PURE__ */ jsx13("span", { className: "mr-1 text-[13px] text-[var(--ui-kit-muted-text)]", children: resolvedLabels.pageLabel(normalizedPage, totalPages) }),
                 /* @__PURE__ */ jsx13(
                   "button",
                   {
@@ -5191,22 +4767,29 @@ function TableBase({
                   }
                 )
               ] }) : null,
-              /* @__PURE__ */ jsx13("div", { style: { display: "flex", alignItems: "center", gap: 10, color: mutedText, fontSize: 13, marginLeft: shouldShowRowsPerPageControl ? "auto" : void 0 }, children: shouldShowRowsPerPageControl ? /* @__PURE__ */ jsxs11(Fragment4, { children: [
-                /* @__PURE__ */ jsx13("span", { children: resolvedLabels.rowsPerPageLabel }),
-                /* @__PURE__ */ jsx13(
-                  "select",
-                  {
-                    value: pageSize,
-                    onChange: (event) => onInternalPageSizeChange(Number(event.currentTarget.value)),
-                    style: {
-                      ...toolbarControlStyle,
-                      height: 38,
-                      padding: "0 12px"
-                    },
-                    children: normalizedPageSizeOptions.map((option) => /* @__PURE__ */ jsx13("option", { value: option, children: option }, option))
-                  }
-                )
-              ] }) : null })
+              /* @__PURE__ */ jsx13(
+                "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__ */ jsxs11(Fragment4, { children: [
+                    /* @__PURE__ */ jsx13("span", { children: resolvedLabels.rowsPerPageLabel }),
+                    /* @__PURE__ */ jsx13(
+                      "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__ */ jsx13("option", { value: option, children: option }, option))
+                      }
+                    )
+                  ] }) : null
+                }
+              )
             ]
           }
         ) : null,
@@ -5219,31 +4802,31 @@ function TableBase({
             maxWidth: 560,
             bodyStyle: { display: "grid", gap: 0 },
             children: [
-              /* @__PURE__ */ jsxs11("section", { style: { display: "grid", gap: 12 }, children: [
-                /* @__PURE__ */ jsx13("strong", { style: { color: theme.colors.text, fontSize: 14 }, children: resolvedLabels.tableInfoSectionTitle }),
-                /* @__PURE__ */ jsxs11("div", { style: { display: "grid", gap: 10, gridTemplateColumns: "repeat(auto-fit, minmax(120px, 1fr))" }, children: [
+              /* @__PURE__ */ jsxs11("section", { className: "grid gap-3", children: [
+                /* @__PURE__ */ jsx13("strong", { className: "text-sm text-[var(--theme-text)]", children: resolvedLabels.tableInfoSectionTitle }),
+                /* @__PURE__ */ jsxs11("div", { className: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]", children: [
                   /* @__PURE__ */ jsxs11("div", { style: infoCardStyle, children: [
-                    /* @__PURE__ */ jsx13("span", { style: { color: mutedText, fontSize: 10, fontWeight: 700, letterSpacing: "0.06em", textTransform: "uppercase" }, children: resolvedLabels.totalPagesInfoLabel }),
-                    /* @__PURE__ */ jsx13("strong", { style: { color: theme.colors.text, fontSize: 18, lineHeight: 1.1 }, children: totalPages })
+                    /* @__PURE__ */ jsx13("span", { className: "text-[10px] font-bold uppercase tracking-[0.06em] text-[var(--ui-kit-muted-text)]", children: resolvedLabels.totalPagesInfoLabel }),
+                    /* @__PURE__ */ jsx13("strong", { className: "text-[18px] leading-[1.1] text-[var(--theme-text)]", children: totalPages })
                   ] }),
                   /* @__PURE__ */ jsxs11("div", { style: infoCardStyle, children: [
-                    /* @__PURE__ */ jsx13("span", { style: { color: mutedText, fontSize: 10, fontWeight: 700, letterSpacing: "0.06em", textTransform: "uppercase" }, children: resolvedLabels.totalItemsInfoLabel }),
-                    /* @__PURE__ */ jsx13("strong", { style: { color: theme.colors.text, fontSize: 18, lineHeight: 1.1 }, children: totalItemCount })
+                    /* @__PURE__ */ jsx13("span", { className: "text-[10px] font-bold uppercase tracking-[0.06em] text-[var(--ui-kit-muted-text)]", children: resolvedLabels.totalItemsInfoLabel }),
+                    /* @__PURE__ */ jsx13("strong", { className: "text-[18px] leading-[1.1] text-[var(--theme-text)]", children: totalItemCount })
                   ] }),
                   /* @__PURE__ */ jsxs11("div", { style: infoCardStyle, children: [
-                    /* @__PURE__ */ jsx13("span", { style: { color: mutedText, fontSize: 10, fontWeight: 700, letterSpacing: "0.06em", textTransform: "uppercase" }, children: resolvedLabels.currentPageInfoLabel }),
-                    /* @__PURE__ */ jsx13("strong", { style: { color: theme.colors.text, fontSize: 18, lineHeight: 1.1 }, children: normalizedPage })
+                    /* @__PURE__ */ jsx13("span", { className: "text-[10px] font-bold uppercase tracking-[0.06em] text-[var(--ui-kit-muted-text)]", children: resolvedLabels.currentPageInfoLabel }),
+                    /* @__PURE__ */ jsx13("strong", { className: "text-[18px] leading-[1.1] text-[var(--theme-text)]", children: normalizedPage })
                   ] }),
                   /* @__PURE__ */ jsxs11("div", { style: infoCardStyle, children: [
-                    /* @__PURE__ */ jsx13("span", { style: { color: mutedText, fontSize: 10, fontWeight: 700, letterSpacing: "0.06em", textTransform: "uppercase" }, children: resolvedLabels.currentPageItemsInfoLabel }),
-                    /* @__PURE__ */ jsx13("strong", { style: { color: theme.colors.text, fontSize: 18, lineHeight: 1.1 }, children: currentPageItemCount })
+                    /* @__PURE__ */ jsx13("span", { className: "text-[10px] font-bold uppercase tracking-[0.06em] text-[var(--ui-kit-muted-text)]", children: resolvedLabels.currentPageItemsInfoLabel }),
+                    /* @__PURE__ */ jsx13("strong", { className: "text-[18px] leading-[1.1] text-[var(--theme-text)]", children: currentPageItemCount })
                   ] })
                 ] })
               ] }),
-              /* @__PURE__ */ jsx13("div", { style: { paddingBlock: 18 }, children: /* @__PURE__ */ jsx13(Separator, { orientation: "horizontal", color: borderSoft }) }),
-              /* @__PURE__ */ jsxs11("section", { style: { display: "grid", gap: 12 }, children: [
-                /* @__PURE__ */ jsx13("strong", { style: { color: theme.colors.text, fontSize: 14 }, children: resolvedLabels.downloadSectionTitle }),
-                /* @__PURE__ */ jsxs11("div", { style: { display: "flex", flexWrap: "wrap", gap: 10 }, children: [
+              /* @__PURE__ */ jsx13("div", { className: "py-[18px]", children: /* @__PURE__ */ jsx13(Separator, { orientation: "horizontal", color: borderSoft }) }),
+              /* @__PURE__ */ jsxs11("section", { className: "grid gap-3", children: [
+                /* @__PURE__ */ jsx13("strong", { className: "text-sm text-[var(--theme-text)]", children: resolvedLabels.downloadSectionTitle }),
+                /* @__PURE__ */ jsxs11("div", { className: "flex flex-wrap gap-2.5", children: [
                   /* @__PURE__ */ jsx13(Button, { size: "sm", variant: "outline", onClick: handleDownloadCsv, disabled: !hasRows, children: resolvedLabels.downloadCsvLabel }),
                   /* @__PURE__ */ jsx13(Button, { size: "sm", variant: "outline", onClick: handleDownloadXls, disabled: !hasRows, children: resolvedLabels.downloadXlsLabel }),
                   /* @__PURE__ */ jsx13(Button, { size: "sm", variant: "outline", onClick: handleDownloadPdf, disabled: !hasRows, children: resolvedLabels.downloadPdfLabel })
@@ -5274,13 +4857,13 @@ function Table({
   ...props
 }) {
   var _a;
-  const initialPageSizeOptions = useMemo6(() => {
+  const initialPageSizeOptions = useMemo7(() => {
     return sanitizePageSizeOptions(pageSizeOptions, defaultPageSize);
   }, [defaultPageSize, pageSizeOptions]);
-  const [searchValue, setSearchValue] = useState9(defaultSearchValue);
-  const [page, setPage] = useState9(Math.max(1, Math.floor(defaultPage)));
-  const [pageSize, setPageSize] = useState9((_a = initialPageSizeOptions[0]) != null ? _a : DEFAULT_PAGE_SIZE);
-  useEffect8(() => {
+  const [searchValue, setSearchValue] = useState8(defaultSearchValue);
+  const [page, setPage] = useState8(Math.max(1, Math.floor(defaultPage)));
+  const [pageSize, setPageSize] = useState8((_a = initialPageSizeOptions[0]) != null ? _a : DEFAULT_PAGE_SIZE);
+  useEffect9(() => {
     var _a2;
     if (initialPageSizeOptions.includes(pageSize)) {
       return;
@@ -5288,7 +4871,7 @@ function Table({
     const nextPageSize = (_a2 = initialPageSizeOptions[0]) != null ? _a2 : DEFAULT_PAGE_SIZE;
     setPageSize(nextPageSize);
   }, [initialPageSizeOptions, pageSize]);
-  const filteredItems = useMemo6(() => {
+  const filteredItems = useMemo7(() => {
     if (!searchable) {
       return items;
     }
@@ -5306,14 +4889,14 @@ function Table({
   const totalItems = filteredItems.length;
   const totalPages = Math.max(1, Math.ceil(totalItems / pageSize));
   const normalizedPage = clampPage(page, totalPages);
-  useEffect8(() => {
+  useEffect9(() => {
     if (normalizedPage === page) {
       return;
     }
     setPage(normalizedPage);
     onPageChange == null ? void 0 : onPageChange(normalizedPage);
   }, [normalizedPage, onPageChange, page]);
-  const pageItems = useMemo6(() => {
+  const pageItems = useMemo7(() => {
     const startIndex = (normalizedPage - 1) * pageSize;
     return filteredItems.slice(startIndex, startIndex + pageSize);
   }, [filteredItems, normalizedPage, pageSize]);
@@ -5353,7 +4936,7 @@ function Table({
 }
 
 // src/components/TableAsync.tsx
-import { useEffect as useEffect9, useMemo as useMemo7, useRef as useRef7, useState as useState10 } from "react";
+import { useEffect as useEffect10, useMemo as useMemo8, useRef as useRef7, useState as useState9 } from "react";
 import { jsx as jsx15 } from "react/jsx-runtime";
 var areUnknownArraysEqual2 = (left, right) => {
   if (left.length !== right.length) {
@@ -5379,25 +4962,25 @@ function TableAsync({
   ...props
 }) {
   var _a;
-  const initialPageSizeOptions = useMemo7(() => {
+  const initialPageSizeOptions = useMemo8(() => {
     return sanitizePageSizeOptions(pageSizeOptions, defaultPageSize);
   }, [defaultPageSize, pageSizeOptions]);
-  const [searchValue, setSearchValue] = useState10(defaultSearchValue);
-  const [debouncedSearchValue, setDebouncedSearchValue] = useState10(defaultSearchValue);
-  const [page, setPage] = useState10(Math.max(1, Math.floor(defaultPage)));
-  const [pageSize, setPageSize] = useState10((_a = initialPageSizeOptions[0]) != null ? _a : DEFAULT_PAGE_SIZE);
-  const [items, setItems] = useState10([]);
-  const [totalPages, setTotalPages] = useState10(1);
-  const [totalItems, setTotalItems] = useState10(void 0);
-  const [loading, setLoading] = useState10(false);
-  const [error, setError] = useState10(null);
-  const [reloadKey, setReloadKey] = useState10(0);
+  const [searchValue, setSearchValue] = useState9(defaultSearchValue);
+  const [debouncedSearchValue, setDebouncedSearchValue] = useState9(defaultSearchValue);
+  const [page, setPage] = useState9(Math.max(1, Math.floor(defaultPage)));
+  const [pageSize, setPageSize] = useState9((_a = initialPageSizeOptions[0]) != null ? _a : DEFAULT_PAGE_SIZE);
+  const [items, setItems] = useState9([]);
+  const [totalPages, setTotalPages] = useState9(1);
+  const [totalItems, setTotalItems] = useState9(void 0);
+  const [loading, setLoading] = useState9(false);
+  const [error, setError] = useState9(null);
+  const [reloadKey, setReloadKey] = useState9(0);
   const loadItemsRef = useRef7(loadItems);
   const cacheUniqsRef = useRef7(cacheUniqs);
   const activeControllerRef = useRef7(null);
   const requestVersionRef = useRef7(0);
   loadItemsRef.current = loadItems;
-  useEffect9(() => {
+  useEffect10(() => {
     var _a2;
     if (initialPageSizeOptions.includes(pageSize)) {
       return;
@@ -5405,7 +4988,7 @@ function TableAsync({
     const nextPageSize = (_a2 = initialPageSizeOptions[0]) != null ? _a2 : DEFAULT_PAGE_SIZE;
     setPageSize(nextPageSize);
   }, [initialPageSizeOptions, pageSize]);
-  useEffect9(() => {
+  useEffect10(() => {
     const timeoutId = window.setTimeout(() => {
       setDebouncedSearchValue(searchValue);
     }, searchDebounceMs);
@@ -5413,7 +4996,7 @@ function TableAsync({
       window.clearTimeout(timeoutId);
     };
   }, [searchDebounceMs, searchValue]);
-  useEffect9(() => {
+  useEffect10(() => {
     if (areUnknownArraysEqual2(cacheUniqsRef.current, cacheUniqs)) {
       return;
     }
@@ -5421,7 +5004,7 @@ function TableAsync({
     setPage(1);
     setReloadKey((currentValue) => currentValue + 1);
   }, [cacheUniqs]);
-  useEffect9(() => {
+  useEffect10(() => {
     var _a2;
     requestVersionRef.current += 1;
     const currentRequestVersion = requestVersionRef.current;
@@ -5459,14 +5042,14 @@ function TableAsync({
       setLoading(false);
     });
   }, [debouncedSearchValue, keepPreviousData, page, pageSize, reloadKey, searchable, ...cacheUniqs]);
-  useEffect9(() => {
+  useEffect10(() => {
     return () => {
       var _a2;
       (_a2 = activeControllerRef.current) == null ? void 0 : _a2.abort();
     };
   }, []);
   const normalizedPage = clampPage(page, totalPages);
-  useEffect9(() => {
+  useEffect10(() => {
     if (normalizedPage === page) {
       return;
     }
@@ -5513,10 +5096,10 @@ function TableAsync({
 
 // src/components/Textarea.tsx
 import { jsx as jsx16 } from "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,
@@ -5529,25 +5112,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__ */ jsx16("textarea", { ...rest, id, disabled, rows, style: textareaStyle });
+  useUiKitTheme();
+  const textarea = /* @__PURE__ */ jsx16(
+    "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__ */ jsx16(ControlFrame, { label, hint, error, htmlFor: id, required: rest.required, children: textarea });
 }
 export {