smartsell-ui-kit 0.0.5 → 0.1.0

package/dist/index.cjs

@@ -22,8 +22,9 @@ var index_exports = {};
 __export(index_exports, {
   Button: () => Button,
   Card: () => Card,
+  Checkbox: () => Checkbox,
   ComposableModal: () => ComposableModal,
-  Field: () => Field,
+  DatePicker: () => DatePicker,
   Input: () => Input,
   Modal: () => Modal,
   Select: () => Select,
@@ -35,42 +36,147 @@ module.exports = __toCommonJS(index_exports);
 
 // src/components/Button.tsx
 var import_react2 = require("react");
-var import_smartsell_sales_sdk2 = require("smartsell-sales-sdk");
+
+// src/components/controlSize.ts
+var CONTROL_METRICS_BY_SIZE = {
+  sm: {
+    height: 30,
+    fontSize: 13,
+    lineHeight: "16px",
+    paddingX: 12,
+    paddingY: 6,
+    buttonPaddingX: 14,
+    selectPaddingRight: 40,
+    selectIndicatorOffset: 12
+  },
+  md: {
+    height: 38,
+    fontSize: 14,
+    lineHeight: "18px",
+    paddingX: 16,
+    paddingY: 9,
+    buttonPaddingX: 18,
+    selectPaddingRight: 44,
+    selectIndicatorOffset: 16
+  },
+  lg: {
+    height: 46,
+    fontSize: 15,
+    lineHeight: "18px",
+    paddingX: 18,
+    paddingY: 13,
+    buttonPaddingX: 20,
+    selectPaddingRight: 48,
+    selectIndicatorOffset: 18
+  }
+};
+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/color.ts
+function withAlpha(hex, alpha) {
+  const normalized = hex.replace("#", "").trim();
+  const value = normalized.length === 3 ? normalized.split("").map((char) => char + char).join("") : normalized;
+  const red = Number.parseInt(value.slice(0, 2), 16);
+  const green = Number.parseInt(value.slice(2, 4), 16);
+  const blue = Number.parseInt(value.slice(4, 6), 16);
+  return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
+}
 
 // src/theme.ts
 var import_react = require("react");
-var import_smartsell_sales_sdk = require("smartsell-sales-sdk");
-function useUiKitTheme(sdk) {
-  const { theme } = (0, import_smartsell_sales_sdk.useSalesTheme)(sdk);
+var import_smartsell_theme = require("smartsell-theme");
+var DEFAULT_THEME_COLORS = {
+  primary: "#111827",
+  secondary: "#6b7280",
+  background: "#f8fafc",
+  surface: "#ffffff",
+  text: "#111827",
+  textLight: "#6b7280",
+  positive: "#16a34a",
+  negative: "#dc2626",
+  warning: "#d97706",
+  info: "#2563eb",
+  onPrimary: "#ffffff"
+};
+function normalizeUiKitTheme(theme) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v;
+  const colors = theme.colors;
+  const primary = (_a = colors.primary) != null ? _a : DEFAULT_THEME_COLORS.primary;
+  const background = (_b = colors.background) != null ? _b : DEFAULT_THEME_COLORS.background;
+  const surface = (_c = colors.surface) != null ? _c : background;
+  const text = (_f = (_e = (_d = colors.text) != null ? _d : colors.onSurface) != null ? _e : colors.onBackground) != null ? _f : DEFAULT_THEME_COLORS.text;
+  const textLight = (_h = (_g = colors.textLight) != null ? _g : colors.onSurfaceLight) != null ? _h : text;
+  const normalizedColors = {
+    ...theme.colors,
+    primary,
+    primaryLight: (_i = colors.primaryLight) != null ? _i : primary,
+    primaryDark: (_j = colors.primaryDark) != null ? _j : primary,
+    secondary: (_k = colors.secondary) != null ? _k : DEFAULT_THEME_COLORS.secondary,
+    background,
+    backgroundLight: (_l = colors.backgroundLight) != null ? _l : background,
+    surface,
+    text,
+    textLight,
+    positive: (_m = colors.positive) != null ? _m : DEFAULT_THEME_COLORS.positive,
+    negative: (_n = colors.negative) != null ? _n : DEFAULT_THEME_COLORS.negative,
+    warning: (_o = colors.warning) != null ? _o : DEFAULT_THEME_COLORS.warning,
+    info: (_p = colors.info) != null ? _p : DEFAULT_THEME_COLORS.info,
+    onPrimary: (_q = colors.onPrimary) != null ? _q : DEFAULT_THEME_COLORS.onPrimary,
+    onSecondary: (_r = colors.onSecondary) != null ? _r : text,
+    onBackground: (_s = colors.onBackground) != null ? _s : text,
+    onSurface: (_t = colors.onSurface) != null ? _t : text,
+    onSurfaceLight: (_u = colors.onSurfaceLight) != null ? _u : textLight,
+    onWarning: (_v = colors.onWarning) != null ? _v : text
+  };
+  return {
+    ...theme,
+    colors: normalizedColors,
+    color: normalizedColors
+  };
+}
+function useUiKitTheme() {
+  const activeTheme = (0, import_smartsell_theme.useThemeValue)();
   return (0, import_react.useMemo)(() => {
+    const theme = normalizeUiKitTheme(activeTheme);
     return {
       theme,
-      borderSoft: (0, import_smartsell_sales_sdk.withAlpha)(theme.colors.onSurface, 0.1),
-      borderStrong: (0, import_smartsell_sales_sdk.withAlpha)(theme.colors.onSurface, 0.16),
-      surfaceMuted: (0, import_smartsell_sales_sdk.withAlpha)(theme.colors.onSurface, 0.04),
-      surfaceRaised: (0, import_smartsell_sales_sdk.withAlpha)(theme.colors.surface, 0.94),
-      overlay: (0, import_smartsell_sales_sdk.withAlpha)("#030712", 0.62),
-      focusRing: (0, import_smartsell_sales_sdk.withAlpha)(theme.colors.primary, 0.22),
-      mutedText: (0, import_smartsell_sales_sdk.withAlpha)(theme.colors.onSurface, 0.72)
+      borderSoft: withAlpha(theme.colors.onSurface, 0.1),
+      borderStrong: withAlpha(theme.colors.onSurface, 0.16),
+      surfaceMuted: withAlpha(theme.colors.onSurface, 0.04),
+      surfaceRaised: withAlpha(theme.colors.surface, 0.94),
+      overlay: withAlpha("#030712", 0.62),
+      focusRing: withAlpha(theme.colors.primary, 0.22),
+      mutedText: withAlpha(theme.colors.onSurface, 0.72)
     };
-  }, [theme]);
+  }, [activeTheme]);
 }
 
 // src/components/Button.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var getSizeStyles = (size) => {
-  if (size === "sm") {
-    return { minHeight: 38, padding: "0 14px", fontSize: 13 };
-  }
-  if (size === "lg") {
-    return { minHeight: 50, padding: "0 20px", fontSize: 15 };
-  }
-  return { minHeight: 44, padding: "0 18px", fontSize: 14 };
-};
 function Button({
-  sdk,
   variant = "solid",
-  tone = "primary",
   size = "md",
   fullWidth = false,
   leadingIcon,
@@ -91,64 +197,42 @@ function Button({
   onTouchCancel,
   ...rest
 }) {
-  const { theme } = useUiKitTheme(sdk);
+  const { theme } = useUiKitTheme();
   const [isHovered, setIsHovered] = (0, import_react2.useState)(false);
   const [isPressed, setIsPressed] = (0, import_react2.useState)(false);
-  const palette = {
-    primary: {
-      background: theme.colors.primary,
-      foreground: theme.colors.onPrimary,
-      border: (0, import_smartsell_sales_sdk2.withAlpha)(theme.colors.primary, 0.3)
-    },
-    secondary: {
-      background: theme.colors.secondary,
-      foreground: theme.colors.onSecondary,
-      border: (0, import_smartsell_sales_sdk2.withAlpha)(theme.colors.secondary, 0.3)
-    },
-    neutral: {
-      background: theme.colors.surface,
-      foreground: theme.colors.onSurface,
-      border: (0, import_smartsell_sales_sdk2.withAlpha)(theme.colors.onSurface, 0.16)
-    },
-    danger: {
-      background: theme.colors.negative,
-      foreground: "#ffffff",
-      border: (0, import_smartsell_sales_sdk2.withAlpha)(theme.colors.negative, 0.32)
-    }
-  }[tone];
   const variantStyles = {
     solid: {
-      backgroundColor: palette.background,
-      borderColor: palette.border,
-      color: palette.foreground
+      backgroundColor: theme.colors.primary,
+      borderColor: withAlpha(theme.colors.primary, 0.5),
+      color: theme.colors.onPrimary
     },
     outline: {
       backgroundColor: "transparent",
-      borderColor: palette.border,
-      color: tone === "neutral" ? palette.foreground : palette.background
+      borderColor: withAlpha(theme.colors.text, 0.5),
+      color: theme.colors.onSurface
     },
     ghost: {
       backgroundColor: "transparent",
       borderColor: "transparent",
-      color: tone === "neutral" ? palette.foreground : palette.background
+      color: theme.colors.onSurface
     }
   };
-  const interactiveColor = tone === "neutral" ? palette.foreground : palette.background;
+  const interactiveColor = variant === "solid" ? theme.colors.primary : theme.colors.onSurface;
   const isInteractive = !disabled;
   const interactionStyles = {
     solid: {
       transform: isPressed ? "translateY(1px) scale(0.985)" : isHovered ? "translateY(-1px)" : "translateY(0)",
-      boxShadow: isPressed ? `0 8px 16px ${(0, import_smartsell_sales_sdk2.withAlpha)(palette.background, 0.2)}` : isHovered ? `0 18px 36px ${(0, import_smartsell_sales_sdk2.withAlpha)(palette.background, 0.26)}` : `0 14px 28px ${(0, import_smartsell_sales_sdk2.withAlpha)(palette.background, 0.18)}`,
-      filter: isPressed ? "brightness(0.95)" : isHovered ? "brightness(1.03)" : void 0
+      boxShadow: "none",
+      filter: void 0
     },
     outline: {
       transform: isPressed ? "translateY(1px) scale(0.985)" : isHovered ? "translateY(-1px)" : "translateY(0)",
-      backgroundColor: isPressed ? (0, import_smartsell_sales_sdk2.withAlpha)(interactiveColor, 0.14) : isHovered ? (0, import_smartsell_sales_sdk2.withAlpha)(interactiveColor, 0.08) : "transparent",
-      boxShadow: isPressed ? `0 6px 12px ${(0, import_smartsell_sales_sdk2.withAlpha)(theme.colors.onSurface, 0.08)}` : isHovered ? `0 12px 24px ${(0, import_smartsell_sales_sdk2.withAlpha)(theme.colors.onSurface, 0.08)}` : "none"
+      backgroundColor: isPressed ? withAlpha(interactiveColor, 0.14) : isHovered ? withAlpha(interactiveColor, 0.08) : "transparent",
+      boxShadow: "none"
     },
     ghost: {
       transform: isPressed ? "translateY(1px) scale(0.985)" : isHovered ? "translateY(-1px)" : "translateY(0)",
-      backgroundColor: isPressed ? (0, import_smartsell_sales_sdk2.withAlpha)(interactiveColor, 0.12) : isHovered ? (0, import_smartsell_sales_sdk2.withAlpha)(interactiveColor, 0.06) : "transparent",
+      backgroundColor: isPressed ? withAlpha(interactiveColor, 0.12) : isHovered ? withAlpha(interactiveColor, 0.06) : "transparent",
       boxShadow: "none"
     }
   };
@@ -220,10 +304,9 @@ function Button({
         cursor: disabled ? "not-allowed" : "pointer",
         fontWeight: 700,
         letterSpacing: "0.01em",
-        lineHeight: 1,
         opacity: disabled ? 0.58 : 1,
-        transition: "transform 140ms ease, opacity 160ms ease, background-color 160ms ease, box-shadow 160ms ease, filter 160ms ease",
-        ...getSizeStyles(size),
+        transition: "transform 140ms ease, opacity 160ms ease, background-color 160ms ease",
+        ...getButtonSizeStyles(size),
         ...variantStyles[variant],
         ...isInteractive ? interactionStyles[variant] : void 0,
         ...style
@@ -238,45 +321,26 @@ function Button({
 }
 
 // src/components/Card.tsx
-var import_smartsell_sales_sdk3 = require("smartsell-sales-sdk");
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var getToneStyles = (tone, sdk) => {
-  const { theme } = useUiKitTheme(sdk);
-  const accent = {
-    default: theme.colors.primary,
-    primary: theme.colors.primary,
-    secondary: theme.colors.secondary,
-    warning: theme.colors.warning
-  }[tone];
-  return {
-    accent,
-    background: `linear-gradient(160deg, ${(0, import_smartsell_sales_sdk3.withAlpha)(theme.colors.surface, 0.98)}, ${(0, import_smartsell_sales_sdk3.withAlpha)(accent, 0.08)})`,
-    border: (0, import_smartsell_sales_sdk3.withAlpha)(accent, 0.22)
-  };
-};
 function Card({
-  sdk,
   children,
   eyebrow,
   title,
   action,
-  tone = "default",
   padded = true,
   style,
   ...rest
 }) {
-  const { theme, mutedText } = useUiKitTheme(sdk);
-  const toneStyles = getToneStyles(tone, sdk);
+  const { theme } = useUiKitTheme();
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "div",
     {
       ...rest,
       style: {
         borderRadius: 28,
-        border: `1px solid ${toneStyles.border}`,
-        background: toneStyles.background,
-        color: theme.colors.onSurface,
-        boxShadow: `0 24px 48px ${(0, import_smartsell_sales_sdk3.withAlpha)(theme.colors.onSurface, 0.06)}`,
+        border: `1px solid ${withAlpha(theme.colors.text, 0.5)}`,
+        background: `${withAlpha(theme.colors.background, 0.7)}`,
+        color: theme.colors.text,
         padding: padded ? 24 : void 0,
         ...style
       },
@@ -297,7 +361,7 @@ function Card({
                   "span",
                   {
                     style: {
-                      color: toneStyles.accent,
+                      color: theme.colors.textLight,
                       fontSize: 12,
                       fontWeight: 800,
                       letterSpacing: "0.16em",
@@ -310,7 +374,7 @@ function Card({
                   "div",
                   {
                     style: {
-                      color: theme.colors.onSurface,
+                      color: theme.colors.text,
                       fontSize: 24,
                       fontWeight: 700,
                       lineHeight: 1.2
@@ -319,7 +383,7 @@ function Card({
                   }
                 ) : null
               ] }),
-              action ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { color: mutedText }, children: action }) : null
+              action ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { color: theme.colors.text }, children: action }) : null
             ]
           }
         ),
@@ -329,13 +393,257 @@ function Card({
   );
 }
 
+// src/components/Checkbox.tsx
+var import_react3 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var CHECKBOX_SIZE_BY_CONTROL_SIZE = {
+  sm: 18,
+  md: 20,
+  lg: 22
+};
+var getCheckboxSize = (controlSize) => CHECKBOX_SIZE_BY_CONTROL_SIZE[controlSize];
+function CheckIcon({ size, color }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { width: size, height: size, viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "path",
+    {
+      d: "M5.75 10.25L8.5 13l5.75-6",
+      stroke: color,
+      strokeWidth: "1.8",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+function MixedIcon({ size, color }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { width: size, height: size, viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M5.5 10H14.5", stroke: color, strokeWidth: "1.8", strokeLinecap: "round" }) });
+}
+function CheckboxIndicator({
+  checked,
+  indeterminate = false,
+  disabled = false,
+  size = 20,
+  checkedColor,
+  iconColor,
+  uncheckedBorderColor,
+  uncheckedBackgroundColor = "transparent",
+  style
+}) {
+  const isActive = checked || indeterminate;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "span",
+    {
+      "aria-hidden": "true",
+      style: {
+        width: size,
+        height: size,
+        borderRadius: 999,
+        boxSizing: "border-box",
+        flexShrink: 0,
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        border: `1.5px solid ${isActive ? checkedColor : uncheckedBorderColor}`,
+        backgroundColor: isActive ? checkedColor : uncheckedBackgroundColor,
+        opacity: disabled ? 0.45 : 1,
+        transition: "background-color 140ms ease, border-color 140ms ease, opacity 140ms ease",
+        ...style
+      },
+      children: [
+        indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MixedIcon, { size: Math.max(10, size - 6), color: iconColor }) : null,
+        !indeterminate && checked ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CheckIcon, { size: Math.max(10, size - 6), color: iconColor }) : null
+      ]
+    }
+  );
+}
+function Checkbox({
+  label,
+  hint,
+  error,
+  controlSize = "md",
+  id,
+  checked,
+  defaultChecked,
+  disabled,
+  indeterminate = false,
+  required,
+  className,
+  style,
+  onChange,
+  onFocus,
+  onBlur,
+  ...rest
+}) {
+  const { theme, mutedText } = useUiKitTheme();
+  const controlMetrics = getControlMetrics(controlSize);
+  const indicatorSize = getCheckboxSize(controlSize);
+  const resolvedId = id != null ? id : `ss-checkbox-${(0, import_react3.useId)().replace(/:/g, "")}`;
+  const inputRef = (0, import_react3.useRef)(null);
+  const [isFocused, setIsFocused] = (0, import_react3.useState)(false);
+  const [internalChecked, setInternalChecked] = (0, import_react3.useState)(Boolean(defaultChecked));
+  const isControlled = checked !== void 0;
+  const resolvedChecked = isControlled ? Boolean(checked) : internalChecked;
+  (0, import_react3.useEffect)(() => {
+    if (!inputRef.current) {
+      return;
+    }
+    inputRef.current.indeterminate = indeterminate;
+  }, [indeterminate, resolvedChecked]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      className,
+      style: {
+        width: "100%",
+        display: "flex",
+        flexDirection: "column",
+        gap: 6,
+        ...style
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        "label",
+        {
+          htmlFor: resolvedId,
+          style: {
+            display: "inline-flex",
+            alignItems: label || hint ? "flex-start" : "center",
+            gap: 10,
+            width: label || hint || error ? "100%" : "auto",
+            cursor: disabled ? "not-allowed" : "pointer",
+            opacity: disabled ? 0.7 : 1,
+            userSelect: "none"
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+              "span",
+              {
+                style: {
+                  position: "relative",
+                  display: "inline-flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  flexShrink: 0,
+                  padding: 2,
+                  marginTop: label || hint ? 1 : 0,
+                  borderRadius: 999,
+                  boxShadow: isFocused ? `0 0 0 3px ${withAlpha(theme.colors.primary, 0.16)}` : "none",
+                  transition: "box-shadow 140ms ease"
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    "input",
+                    {
+                      ...rest,
+                      ref: inputRef,
+                      id: resolvedId,
+                      type: "checkbox",
+                      checked: resolvedChecked,
+                      disabled,
+                      required,
+                      onChange: (event) => {
+                        if (!isControlled) {
+                          setInternalChecked(event.currentTarget.checked);
+                        }
+                        onChange == null ? void 0 : onChange(event);
+                      },
+                      onFocus: (event) => {
+                        setIsFocused(true);
+                        onFocus == null ? void 0 : onFocus(event);
+                      },
+                      onBlur: (event) => {
+                        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"
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    CheckboxIndicator,
+                    {
+                      checked: resolvedChecked,
+                      indeterminate,
+                      disabled,
+                      size: indicatorSize,
+                      checkedColor: theme.colors.primary,
+                      iconColor: theme.colors.onPrimary,
+                      uncheckedBorderColor: withAlpha(theme.colors.onSurface, 0.24),
+                      uncheckedBackgroundColor: theme.colors.surface
+                    }
+                  )
+                ]
+              }
+            ),
+            label || hint || error ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+              "span",
+              {
+                style: {
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: 4,
+                  minWidth: 0
+                },
+                children: [
+                  label ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                    "span",
+                    {
+                      style: {
+                        color: theme.colors.onSurface,
+                        fontSize: controlMetrics.fontSize,
+                        lineHeight: controlMetrics.lineHeight,
+                        fontWeight: 600
+                      },
+                      children: [
+                        label,
+                        required ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { color: theme.colors.negative, marginLeft: 4 }, children: "*" }) : null
+                      ]
+                    }
+                  ) : null,
+                  hint ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    "span",
+                    {
+                      style: {
+                        color: mutedText,
+                        fontSize: 13,
+                        lineHeight: 1.45
+                      },
+                      children: hint
+                    }
+                  ) : null,
+                  error ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    "span",
+                    {
+                      style: {
+                        color: theme.colors.negative,
+                        fontSize: 13,
+                        lineHeight: 1.45,
+                        fontWeight: 600
+                      },
+                      children: error
+                    }
+                  ) : null
+                ]
+              }
+            ) : null
+          ]
+        }
+      )
+    }
+  );
+}
+
 // src/components/ComposableModal.tsx
-var import_react4 = require("react");
-var import_smartsell_sales_sdk4 = require("smartsell-sales-sdk");
+var import_react5 = require("react");
 
 // src/components/Modal.tsx
-var import_react3 = require("react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_react4 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var defaultThemeColors = {
   background: "#f8fafc",
   surface: "#ffffff",
@@ -348,13 +656,16 @@ var defaultThemeColors = {
   negative: "#dc2626",
   warning: "#d97706"
 };
-var withAlpha4 = (hex, alpha) => {
-  const normalized = hex.replace("#", "").trim();
-  const value = normalized.length === 3 ? normalized.split("").map((char) => char + char).join("") : normalized;
-  const red = Number.parseInt(value.slice(0, 2), 16);
-  const green = Number.parseInt(value.slice(2, 4), 16);
-  const blue = Number.parseInt(value.slice(4, 6), 16);
-  return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
+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);
@@ -368,12 +679,12 @@ var resolveTheme = (theme) => {
   };
   return {
     colors,
-    borderSoft: isUiKitThemeTokens(theme) ? theme.borderSoft : withAlpha4(colors.onSurface, 0.1),
-    borderStrong: isUiKitThemeTokens(theme) ? theme.borderStrong : withAlpha4(colors.onSurface, 0.16),
-    surfaceMuted: isUiKitThemeTokens(theme) ? theme.surfaceMuted : withAlpha4(colors.onSurface, 0.04),
-    surfaceRaised: isUiKitThemeTokens(theme) ? theme.surfaceRaised : withAlpha4(colors.surface, 0.94),
-    overlay: isUiKitThemeTokens(theme) ? theme.overlay : withAlpha4("#030712", 0.62),
-    mutedText: isUiKitThemeTokens(theme) ? theme.mutedText : withAlpha4(colors.onSurface, 0.72)
+    borderSoft: isUiKitThemeTokens(theme) ? theme.borderSoft : withAlpha(colors.onSurface, 0.1),
+    borderStrong: isUiKitThemeTokens(theme) ? theme.borderStrong : withAlpha(colors.onSurface, 0.16),
+    surfaceMuted: isUiKitThemeTokens(theme) ? theme.surfaceMuted : withAlpha(colors.onSurface, 0.04),
+    surfaceRaised: isUiKitThemeTokens(theme) ? theme.surfaceRaised : withAlpha(colors.surface, 0.94),
+    overlay: isUiKitThemeTokens(theme) ? theme.overlay : withAlpha("#030712", 0.62),
+    mutedText: isUiKitThemeTokens(theme) ? theme.mutedText : withAlpha(colors.onSurface, 0.72)
   };
 };
 var normalizeWidth = (maxWidth) => {
@@ -390,58 +701,122 @@ var isLikelyMobileViewport = () => {
     navigator.userAgent
   );
 };
+var createTitleId = (title) => {
+  if (typeof title === "string" || typeof title === "number") {
+    const normalized = String(title).toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/(^-|-$)/g, "");
+    return `smartsell-modal-${normalized || "dialog"}`;
+  }
+  return "smartsell-modal-dialog";
+};
 var isLegacyModalProps = (props) => {
   return "showModal" in props;
 };
-function LegacyActionButton({
-  label,
-  onClick,
-  disabled,
-  type = "contained",
-  theme,
-  style
+var normalizeLegacyAction = (action, fallbackDisabled = false) => {
+  var _a, _b, _c;
+  return {
+    label: action.name,
+    onClick: action.onClick,
+    appearance: (_a = action.type) != null ? _a : "contained",
+    style: (_b = action.style) != null ? _b : { maxWidth: "150px" },
+    disabled: (_c = action.disable) != null ? _c : fallbackDisabled
+  };
+};
+var normalizeModalProps = (props) => {
+  var _a, _b;
+  if (!isLegacyModalProps(props)) {
+    return props;
+  }
+  const isBusy = Boolean(props.isLoading);
+  const disableAction = Boolean(props.disableActionBtn || props.isLoading);
+  return {
+    isOpen: props.showModal,
+    onClose: props.closeModal,
+    title: props.title,
+    children: props.children,
+    theme: props.theme,
+    maximized: props.maximized,
+    contentStyle: props.style,
+    bodyStyle: props.bodyStyle,
+    hideCloseButton: props.hideCloseIcon,
+    disableDismiss: isBusy,
+    closeOnBackdrop: false,
+    closeOnEscape: false,
+    isBusy,
+    closeAction: props.onlyCloseButton ? {
+      label: "Close",
+      onClick: props.closeModal,
+      appearance: "contained",
+      disabled: isBusy
+    } : void 0,
+    cancelAction: props.onlyCloseButton || !props.cancelButton ? void 0 : {
+      label: "Cancel",
+      onClick: props.cancelButton,
+      appearance: "text",
+      style: { maxWidth: "100px" }
+    },
+    confirmAction: props.onlyCloseButton || props.hideActionButton || !props.action ? void 0 : {
+      label: (_a = props.actionNameBtn) != null ? _a : "Save",
+      onClick: props.action,
+      appearance: "contained",
+      style: { maxWidth: "100px" },
+      disabled: disableAction
+    },
+    extraActions: props.onlyCloseButton ? void 0 : (_b = props.additionalActions) == null ? void 0 : _b.map((action) => normalizeLegacyAction(action, disableAction))
+  };
+};
+function ModalActionButton({
+  action,
+  theme
 }) {
   var _a, _b;
   const { colors } = theme;
+  const {
+    label,
+    onClick,
+    appearance = "contained",
+    disabled = false,
+    style
+  } = action;
   const buttonStyle = {
     width: "100%",
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
     borderRadius: "0.4rem",
-    padding: type === "link" ? 0 : "1.3rem",
+    padding: appearance === "link" ? 0 : "0.9rem 1.15rem",
     boxSizing: "border-box",
     cursor: disabled ? "not-allowed" : "pointer",
     fontWeight: 700,
-    fontSize: "1.3rem",
+    fontSize: "1.05rem",
+    lineHeight: 1.2,
     margin: 0,
     textAlign: "center",
     transition: "0.5s",
     opacity: disabled ? 0.5 : 1,
     filter: disabled ? "saturate(0)" : void 0
   };
-  if (type === "text") {
+  if (appearance === "text") {
     buttonStyle.background = "none";
     buttonStyle.border = "1px solid transparent";
     buttonStyle.color = colors.primary;
     buttonStyle.boxShadow = "none";
-  } else if (type === "link") {
+  } else if (appearance === "link") {
     buttonStyle.background = "none";
     buttonStyle.border = "none";
     buttonStyle.color = colors.primary;
     buttonStyle.boxShadow = "none";
-  } else if (type === "outlined") {
+  } else if (appearance === "outlined") {
     buttonStyle.background = "none";
     buttonStyle.border = `2px solid ${colors.primary}`;
     buttonStyle.color = colors.primary;
-    buttonStyle.boxShadow = `0 14px 28px ${withAlpha4(colors.onSurface, 0.08)}`;
+    buttonStyle.boxShadow = `0 14px 28px ${withAlpha(colors.onSurface, 0.08)}`;
   } else {
     buttonStyle.background = colors.primary;
     buttonStyle.border = "1px solid transparent";
     buttonStyle.color = colors.onPrimary;
-    buttonStyle.boxShadow = `0 14px 28px ${withAlpha4(colors.primary, 0.22)}`;
+    buttonStyle.boxShadow = `0 14px 28px ${withAlpha(colors.primary, 0.22)}`;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "div",
     {
       style: {
@@ -449,11 +824,11 @@ function LegacyActionButton({
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
-        margin: "0 5px",
+        margin: 0,
         marginBottom: (_b = style == null ? void 0 : style.marginBottom) != null ? _b : 0,
         ...style
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         "button",
         {
           type: "button",
@@ -466,30 +841,92 @@ function LegacyActionButton({
     }
   );
 }
-function StandardModal({
+function ModalBusyIndicator({
+  theme
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      "aria-live": "polite",
+      role: "status",
+      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.onSurface, 0.08)}`
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: srOnlyStyle, children: "Loading" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { "aria-hidden": "true", width: "32", height: "32", viewBox: "0 0 40 40", fill: "none", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "circle",
+            {
+              cx: "20",
+              cy: "20",
+              r: "16",
+              stroke: withAlpha(theme.colors.onSurface, 0.12),
+              strokeWidth: "4"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "path",
+            {
+              d: "M20 4C28.837 4 36 11.163 36 20",
+              stroke: theme.colors.primary,
+              strokeWidth: "4",
+              strokeLinecap: "round",
+              children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "animateTransform",
+                {
+                  attributeName: "transform",
+                  type: "rotate",
+                  from: "0 20 20",
+                  to: "360 20 20",
+                  dur: "0.75s",
+                  repeatCount: "indefinite"
+                }
+              )
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function UnifiedModal({
   isOpen,
   onClose,
   children,
-  footer,
   title,
-  description,
   headerContent,
+  footer,
+  confirmAction,
+  cancelAction,
+  closeAction,
+  extraActions,
   maxWidth,
   closeOnBackdrop = true,
   closeOnEscape = true,
   hideCloseButton = false,
   hideExpandButton = false,
+  disableDismiss = false,
   maximized,
   contentStyle,
+  bodyStyle,
+  isBusy = false,
   theme
 }) {
-  const modalTheme = (0, import_react3.useMemo)(() => resolveTheme(theme), [theme]);
-  const [isMaximized, setIsMaximized] = (0, import_react3.useState)(maximized != null ? maximized : false);
-  const titleId = (0, import_react3.useMemo)(
-    () => `smartsell-modal-${String(title != null ? title : "dialog").toLowerCase().replace(/[^a-z0-9]+/g, "-")}`,
-    [title]
-  );
-  (0, import_react3.useEffect)(() => {
+  var _a, _b;
+  const modalTheme = (0, import_react4.useMemo)(() => resolveTheme(theme), [theme]);
+  const [isMaximized, setIsMaximized] = (0, import_react4.useState)(maximized != null ? maximized : false);
+  const titleId = (0, import_react4.useMemo)(() => createTitleId(title), [title]);
+  const shouldDisableDismiss = disableDismiss || isBusy;
+  (0, import_react4.useEffect)(() => {
     if (typeof maximized === "boolean") {
       setIsMaximized(maximized);
       return;
@@ -498,14 +935,14 @@ function StandardModal({
       setIsMaximized(true);
     }
   }, [maximized]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (!isOpen || typeof window === "undefined" || typeof document === "undefined") {
       return;
     }
     const previousOverflow = document.body.style.overflow;
     document.body.style.overflow = "hidden";
     const handleKeyDown = (event) => {
-      if (closeOnEscape && event.key === "Escape") {
+      if (!shouldDisableDismiss && closeOnEscape && event.key === "Escape") {
         onClose();
       }
     };
@@ -514,47 +951,82 @@ function StandardModal({
       document.body.style.overflow = previousOverflow;
       window.removeEventListener("keydown", handleKeyDown);
     };
-  }, [closeOnEscape, isOpen, onClose]);
+  }, [closeOnEscape, isOpen, onClose, shouldDisableDismiss]);
   if (!isOpen) {
     return null;
   }
-  const header = headerContent != null ? headerContent : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
-    title ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      "h2",
-      {
-        id: titleId,
-        style: {
-          margin: 0,
-          color: modalTheme.colors.onSurface,
-          fontSize: 30,
-          fontWeight: 800,
-          lineHeight: 1.1
-        },
-        children: title
-      }
-    ) : null,
-    description ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      "p",
-      {
-        style: {
-          margin: 0,
-          color: modalTheme.mutedText,
-          fontSize: 15,
-          lineHeight: 1.6
+  const resolvedHeader = headerContent != null ? headerContent : title ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "h2",
+    {
+      id: titleId,
+      style: {
+        margin: 0,
+        color: modalTheme.colors.onSurface,
+        fontSize: 30,
+        fontWeight: 800,
+        lineHeight: 1.1
+      },
+      children: title
+    }
+  ) : null;
+  let footerContent = footer;
+  if (footerContent === void 0) {
+    if (closeAction && !closeAction.hidden) {
+      footerContent = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        ModalActionButton,
+        {
+          action: { ...closeAction, disabled: closeAction.disabled || isBusy },
+          theme: modalTheme
+        }
+      );
+    } else {
+      const resolvedActions = [
+        cancelAction ? {
+          ...cancelAction,
+          appearance: (_a = cancelAction.appearance) != null ? _a : "text",
+          disabled: cancelAction.disabled || isBusy
+        } : void 0,
+        ...(extraActions != null ? extraActions : []).map((action) => {
+          var _a2;
+          return {
+            ...action,
+            appearance: (_a2 = action.appearance) != null ? _a2 : "contained",
+            disabled: action.disabled || isBusy
+          };
+        }),
+        confirmAction ? {
+          ...confirmAction,
+          appearance: (_b = confirmAction.appearance) != null ? _b : "contained",
+          disabled: confirmAction.disabled || isBusy
+        } : void 0
+      ].reduce((items, action) => {
+        if (!action || action.hidden) {
+          return items;
+        }
+        items.push(action);
+        return items;
+      }, []);
+      footerContent = resolvedActions.length > 0 ? resolvedActions.map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        ModalActionButton,
+        {
+          action,
+          theme: modalTheme
         },
-        children: description
-      }
-    ) : null
-  ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        `modal-action-${index}`
+      )) : void 0;
+    }
+  }
+  const shouldRenderFooter = footerContent !== void 0 && footerContent !== null && footerContent !== false;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "div",
     {
       "aria-label": headerContent ? typeof title === "string" ? title : "Dialog" : void 0,
       "aria-labelledby": headerContent ? void 0 : title ? titleId : void 0,
+      "aria-busy": isBusy,
       "aria-modal": "true",
       role: "dialog",
       onMouseDown: (event) => {
-        if (closeOnBackdrop && event.target === event.currentTarget) {
+        if (!shouldDisableDismiss && closeOnBackdrop && event.target === event.currentTarget) {
           onClose();
         }
       },
@@ -569,7 +1041,7 @@ function StandardModal({
         backgroundColor: modalTheme.overlay,
         backdropFilter: "blur(8px)"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
         "div",
         {
           style: {
@@ -580,30 +1052,41 @@ function StandardModal({
             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: `0 34px 80px ${withAlpha4("#020617", 0.28)}`,
+            boxShadow: `0 34px 80px ${withAlpha("#020617", 0.28)}`,
             color: modalTheme.colors.onSurface,
             overflow: "hidden",
             ...contentStyle
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
               "div",
               {
                 style: {
                   display: "flex",
                   alignItems: "flex-start",
                   justifyContent: "space-between",
-                  gap: 16,
-                  padding: "24px 24px 16px",
-                  borderBottom: `1px solid ${withAlpha4(modalTheme.colors.onSurface, 0.06)}`
+                  gap: 12,
+                  padding: "18px 20px 12px",
+                  borderBottom: `1px solid ${withAlpha(modalTheme.colors.onSurface, 0.06)}`
                 },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { flex: 1 }, children: header }),
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
-                    !hideExpandButton ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                    "div",
+                    {
+                      style: {
+                        flex: 1,
+                        opacity: isBusy ? 0.38 : 1,
+                        transition: "opacity 180ms ease"
+                      },
+                      children: resolvedHeader
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+                    !hideExpandButton ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                       "button",
                       {
                         "aria-label": isMaximized ? "Minimize modal" : "Maximize modal",
@@ -611,8 +1094,8 @@ function StandardModal({
                         type: "button",
                         onClick: () => setIsMaximized((current) => !current),
                         style: {
-                          height: 42,
-                          width: 42,
+                          height: 40,
+                          width: 40,
                           borderRadius: 999,
                           border: `1px solid ${modalTheme.borderSoft}`,
                           backgroundColor: "transparent",
@@ -624,22 +1107,23 @@ function StandardModal({
                         children: isMaximized ? "\u25A2" : "\u25A1"
                       }
                     ) : null,
-                    !hideCloseButton ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    !hideCloseButton ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                       "button",
                       {
                         "aria-label": "Close modal",
                         type: "button",
-                        onClick: onClose,
+                        onClick: shouldDisableDismiss ? void 0 : onClose,
                         style: {
-                          height: 42,
-                          width: 42,
+                          height: 40,
+                          width: 40,
                           borderRadius: 999,
                           border: `1px solid ${modalTheme.borderSoft}`,
                           backgroundColor: "transparent",
                           color: modalTheme.colors.onSurface,
-                          cursor: "pointer",
+                          cursor: shouldDisableDismiss ? "not-allowed" : "pointer",
                           fontSize: 20,
-                          fontWeight: 700
+                          fontWeight: 700,
+                          opacity: shouldDisableDismiss ? 0.5 : 1
                         },
                         children: "\xD7"
                       }
@@ -648,29 +1132,59 @@ function StandardModal({
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
               "div",
               {
                 style: {
                   flex: 1,
                   minHeight: 0,
+                  position: "relative",
                   overflow: "auto",
-                  padding: 24
+                  padding: 24,
+                  ...bodyStyle
                 },
-                children
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                    "div",
+                    {
+                      style: {
+                        opacity: isBusy ? 0.38 : 1,
+                        filter: isBusy ? "saturate(0.8)" : "none",
+                        pointerEvents: isBusy ? "none" : "auto",
+                        transition: "opacity 180ms ease, filter 180ms ease"
+                      },
+                      children
+                    }
+                  ),
+                  isBusy ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                    "div",
+                    {
+                      style: {
+                        position: "absolute",
+                        inset: 0,
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        backgroundColor: withAlpha(modalTheme.colors.surface, 0.58),
+                        backdropFilter: "blur(2px)"
+                      },
+                      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ModalBusyIndicator, { theme: modalTheme })
+                    }
+                  ) : null
+                ]
               }
             ),
-            footer ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            shouldRenderFooter ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
               "div",
               {
                 style: {
                   display: "flex",
                   justifyContent: "flex-end",
-                  gap: 12,
-                  padding: "16px 24px 24px",
-                  borderTop: `1px solid ${withAlpha4(modalTheme.colors.onSurface, 0.06)}`
+                  gap: 10,
+                  padding: "12px 20px 16px",
+                  borderTop: `1px solid ${withAlpha(modalTheme.colors.onSurface, 0.06)}`
                 },
-                children: footer
+                children: footerContent
               }
             ) : null
           ]
@@ -679,548 +1193,1913 @@ function StandardModal({
     }
   );
 }
-function LegacyModal({
+function Modal(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(UnifiedModal, { ...normalizeModalProps(props) });
+}
+
+// src/components/ComposableModal.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var createModalSlotIds = (slotBaseId) => ({
+  header: `${slotBaseId}:modal-header`,
+  body: `${slotBaseId}:modal-body`,
+  footer: `${slotBaseId}:modal-footer`
+});
+function ComposableModal({
+  isOpen,
+  onClose,
   title,
-  showModal,
-  closeModal,
-  children,
-  action,
-  actionNameBtn,
-  hideActionButton = false,
-  cancelButton,
-  disableActionBtn = false,
-  isLoading = false,
-  onlyCloseButton = false,
-  hideCloseIcon = false,
-  style,
-  bodyStyle,
-  additionalActions,
+  slotBaseId,
+  renderSlot,
+  payload,
+  onConfirm,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  isBusy = false,
+  closeOnBackdrop = true,
+  closeOnEscape = true,
+  hideExpandButton = false,
   maximized,
-  theme
+  hideDefaultFooter = false,
+  maxWidth,
+  headerFallback,
+  footerFallback,
+  children
 }) {
-  const modalTheme = (0, import_react3.useMemo)(() => resolveTheme(theme), [theme]);
-  const [isMaximized, setIsMaximized] = (0, import_react3.useState)(maximized != null ? maximized : false);
-  const resolvedAction = action != null ? action : (() => null);
-  (0, import_react3.useEffect)(() => {
-    if (maximized === void 0 && isLikelyMobileViewport()) {
-      setIsMaximized(true);
+  const theme = useUiKitTheme();
+  const slotIds = createModalSlotIds(slotBaseId);
+  const context = (0, import_react5.useMemo)(
+    () => ({
+      title,
+      payload,
+      close: onClose,
+      confirm: onConfirm,
+      confirmLabel,
+      cancelLabel,
+      isOpen,
+      isBusy
+    }),
+    [cancelLabel, confirmLabel, isBusy, isOpen, onClose, onConfirm, payload, title]
+  );
+  const defaultFooter = hideDefaultFooter ? void 0 : footerFallback != null ? footerFallback : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Button, { variant: "outline", onClick: onClose, disabled: isBusy, children: cancelLabel }),
+    onConfirm ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Button, { onClick: onConfirm, disabled: isBusy, children: confirmLabel }) : null
+  ] });
+  const defaultHeader = headerFallback != null ? headerFallback : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "h2",
+    {
+      style: {
+        margin: 0,
+        fontSize: 30,
+        fontWeight: 800,
+        lineHeight: 1.1
+      },
+      children: title
     }
-  }, [maximized]);
-  if (!showModal) {
-    return null;
+  );
+  const renderSlotContent = (id, slotChildren) => {
+    if (!renderSlot) {
+      return slotChildren;
+    }
+    return renderSlot({
+      id,
+      context,
+      children: slotChildren
+    });
+  };
+  const headerContent = renderSlotContent(slotIds.header, defaultHeader);
+  const bodyContent = renderSlotContent(slotIds.body, children);
+  const footerContent = renderSlotContent(slotIds.footer, defaultFooter);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    Modal,
+    {
+      isOpen,
+      onClose,
+      title,
+      isBusy,
+      headerContent,
+      footer: footerContent,
+      theme,
+      maxWidth,
+      hideExpandButton,
+      maximized,
+      closeOnBackdrop,
+      closeOnEscape,
+      children: bodyContent
+    }
+  );
+}
+
+// src/components/DatePicker.tsx
+var import_react7 = require("react");
+
+// src/components/Input.tsx
+var import_react6 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var PASSWORD_TOGGLE_METRICS_BY_SIZE = {
+  sm: {
+    buttonSize: 18,
+    leftOffset: 8,
+    contentGap: 8,
+    iconSize: 14
+  },
+  md: {
+    buttonSize: 20,
+    leftOffset: 10,
+    contentGap: 10,
+    iconSize: 16
+  },
+  lg: {
+    buttonSize: 22,
+    leftOffset: 12,
+    contentGap: 12,
+    iconSize: 18
+  }
+};
+var getPasswordToggleMetrics = (size) => PASSWORD_TOGGLE_METRICS_BY_SIZE[size];
+function ControlFrame({
+  label,
+  hint,
+  error,
+  htmlFor,
+  required = false,
+  useLabelWrapper = true,
+  children,
+  style
+}) {
+  const { theme, mutedText } = useUiKitTheme();
+  if (!label && !hint && !error) {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children });
   }
-  const actionButtons = () => {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-      additionalActions == null ? void 0 : additionalActions.map((item) => {
-        var _a, _b, _c;
-        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          LegacyActionButton,
+  const labelStyle = {
+    color: theme.colors.onSurface,
+    fontSize: 14,
+    fontWeight: 700,
+    letterSpacing: "0.01em"
+  };
+  const wrapperStyle = {
+    display: "flex",
+    flexDirection: "column",
+    gap: 8,
+    width: "100%",
+    ...style
+  };
+  if (!useLabelWrapper) {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: wrapperStyle, children: [
+      label || hint ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [
+        label ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { htmlFor, style: labelStyle, children: [
+          label,
+          required ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { color: theme.colors.negative, marginLeft: 4 }, children: "*" }) : null
+        ] }) : null,
+        hint ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "span",
           {
-            label: item.name,
-            onClick: item.onClick,
-            type: (_a = item.type) != null ? _a : "contained",
-            style: (_b = item.style) != null ? _b : { maxWidth: "150px" },
-            theme: modalTheme,
-            disabled: (_c = item.disable) != null ? _c : disableActionBtn || isLoading
-          },
-          item.name
-        );
-      }),
-      !hideActionButton ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        LegacyActionButton,
+            style: {
+              color: mutedText,
+              fontSize: 13,
+              lineHeight: 1.45
+            },
+            children: hint
+          }
+        ) : null
+      ] }) : null,
+      children,
+      error ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "span",
         {
-          label: actionNameBtn != null ? actionNameBtn : "Save",
-          onClick: resolvedAction,
-          type: "contained",
-          style: { maxWidth: "100px" },
-          theme: modalTheme,
-          disabled: disableActionBtn || isLoading
+          style: {
+            color: theme.colors.negative,
+            fontSize: 13,
+            fontWeight: 600,
+            lineHeight: 1.45
+          },
+          children: error
         }
       ) : null
     ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { htmlFor, style: wrapperStyle, children: [
+    label || hint ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [
+      label ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { style: labelStyle, children: [
+        label,
+        required ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { color: theme.colors.negative, marginLeft: 4 }, children: "*" }) : null
+      ] }) : null,
+      hint ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "span",
+        {
+          style: {
+            color: mutedText,
+            fontSize: 13,
+            lineHeight: 1.45
+          },
+          children: hint
+        }
+      ) : null
+    ] }) : null,
+    children,
+    error ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "span",
+      {
+        style: {
+          color: theme.colors.negative,
+          fontSize: 13,
+          fontWeight: 600,
+          lineHeight: 1.45
+        },
+        children: error
+      }
+    ) : null
+  ] });
+}
+function Input({
+  label,
+  hint,
+  error,
+  controlSize = "md",
+  showPasswordToggle = false,
+  id,
+  disabled,
+  style,
+  type = "text",
+  ...rest
+}) {
+  const { theme, focusRing } = useUiKitTheme();
+  const controlMetrics = getControlMetrics(controlSize);
+  const passwordToggleMetrics = getPasswordToggleMetrics(controlSize);
+  const [isPasswordVisible, setIsPasswordVisible] = (0, import_react6.useState)(false);
+  const isPasswordField = type === "password";
+  const canTogglePasswordVisibility = isPasswordField && showPasswordToggle;
+  const passwordToggleInset = Math.max(
+    0,
+    passwordToggleMetrics.leftOffset + passwordToggleMetrics.buttonSize + passwordToggleMetrics.contentGap - controlMetrics.paddingX
+  );
+  const leadingInset = Number(canTogglePasswordVisibility) * passwordToggleInset;
+  const resolvedType = canTogglePasswordVisibility ? isPasswordVisible ? "text" : "password" : type;
+  const inputStyle = {
+    width: "100%",
+    boxSizing: "border-box",
+    height: controlMetrics.height,
+    borderRadius: 16,
+    border: `1px solid ${error ? theme.colors.negative : withAlpha(theme.colors.textLight, 0.5)}`,
+    backgroundColor: theme.colors.surface,
+    color: theme.colors.text,
+    cursor: disabled ? "not-allowed" : "text",
+    opacity: disabled ? 0.7 : 1,
+    padding: getTextInputPadding(controlSize, { leadingInset }),
+    outline: "none",
+    fontSize: controlMetrics.fontSize,
+    lineHeight: controlMetrics.lineHeight,
+    boxShadow: error ? `0 0 0 3px ${withAlpha(theme.colors.negative, 0.12)}` : `0 0 0 0 ${focusRing}`,
+    transition: "border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease",
+    ...style
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    "div",
+  const input = canTogglePasswordVisibility ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { position: "relative", width: "100%" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "button",
+      {
+        type: "button",
+        "aria-label": isPasswordVisible ? "Hide password" : "Show password",
+        "aria-pressed": isPasswordVisible,
+        disabled,
+        onMouseDown: (event) => {
+          event.preventDefault();
+        },
+        onClick: () => {
+          setIsPasswordVisible((currentValue) => !currentValue);
+        },
+        style: {
+          position: "absolute",
+          top: "50%",
+          left: passwordToggleMetrics.leftOffset,
+          transform: "translateY(-50%)",
+          zIndex: 1,
+          width: passwordToggleMetrics.buttonSize,
+          height: passwordToggleMetrics.buttonSize,
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center",
+          border: "none",
+          padding: 0,
+          margin: 0,
+          borderRadius: 999,
+          backgroundColor: "transparent",
+          color: isPasswordVisible ? theme.colors.primary : theme.colors.textLight,
+          cursor: disabled ? "not-allowed" : "pointer",
+          opacity: disabled ? 0.5 : 1
+        },
+        children: isPasswordVisible ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+          "svg",
+          {
+            width: passwordToggleMetrics.iconSize,
+            height: passwordToggleMetrics.iconSize,
+            viewBox: "0 0 20 20",
+            fill: "none",
+            "aria-hidden": "true",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                "path",
+                {
+                  d: "M2.5 3.5L17.5 16.5",
+                  stroke: "currentColor",
+                  strokeWidth: "1.8",
+                  strokeLinecap: "round"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                "path",
+                {
+                  d: "M8.825 8.786a2 2 0 0 0 2.389 2.389",
+                  stroke: "currentColor",
+                  strokeWidth: "1.8",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                "path",
+                {
+                  d: "M4.42 6.774C3.422 7.73 2.777 8.815 2.5 9.375c1.182 2.39 3.934 5.625 7.5 5.625 1.155 0 2.224-.34 3.166-.847",
+                  stroke: "currentColor",
+                  strokeWidth: "1.8",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                "path",
+                {
+                  d: "M7.043 4.455A7.7 7.7 0 0 1 10 3.75c3.566 0 6.318 3.235 7.5 5.625-.39.787-1.504 2.588-3.259 3.986",
+                  stroke: "currentColor",
+                  strokeWidth: "1.8",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              )
+            ]
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+          "svg",
+          {
+            width: passwordToggleMetrics.iconSize,
+            height: passwordToggleMetrics.iconSize,
+            viewBox: "0 0 20 20",
+            fill: "none",
+            "aria-hidden": "true",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                "path",
+                {
+                  d: "M2.5 10c1.182-2.39 3.934-5.625 7.5-5.625S16.318 7.61 17.5 10c-1.182 2.39-3.934 5.625-7.5 5.625S3.682 12.39 2.5 10Z",
+                  stroke: "currentColor",
+                  strokeWidth: "1.8",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: "10", cy: "10", r: "2.25", stroke: "currentColor", strokeWidth: "1.8" })
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { ...rest, id, type: resolvedType, disabled, style: inputStyle })
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { ...rest, id, type: resolvedType, disabled, style: inputStyle });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ControlFrame, { label, hint, error, htmlFor: id, required: rest.required, children: input });
+}
+
+// src/components/DatePicker.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var DEFAULT_FORMAT_BY_MODE = {
+  date: "DD/MM/YYYY",
+  datetime: "DD/MM/YYYY HH:mm"
+};
+var HTML_DATE_PATTERN = /^(\d{4})-(\d{2})-(\d{2})$/;
+var HTML_DATETIME_PATTERN = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})(?::\d{2})?$/;
+var FORMAT_TOKENS = [
+  {
+    token: "YYYY",
+    key: "year",
+    pattern: "(\\d{4})",
+    formatter: (date) => String(date.getFullYear())
+  },
+  {
+    token: "MM",
+    key: "month",
+    pattern: "(\\d{1,2})",
+    formatter: (date) => padNumber(date.getMonth() + 1)
+  },
+  {
+    token: "DD",
+    key: "day",
+    pattern: "(\\d{1,2})",
+    formatter: (date) => padNumber(date.getDate())
+  },
+  {
+    token: "HH",
+    key: "hour",
+    pattern: "(\\d{1,2})",
+    formatter: (date) => padNumber(date.getHours())
+  },
+  {
+    token: "mm",
+    key: "minute",
+    pattern: "(\\d{1,2})",
+    formatter: (date) => padNumber(date.getMinutes())
+  }
+];
+var ACCESSORY_METRICS_BY_SIZE = {
+  sm: {
+    buttonSize: 18,
+    iconSize: 14,
+    rightOffset: 8,
+    clusterGap: 6,
+    contentGap: 8
+  },
+  md: {
+    buttonSize: 20,
+    iconSize: 16,
+    rightOffset: 10,
+    clusterGap: 8,
+    contentGap: 10
+  },
+  lg: {
+    buttonSize: 22,
+    iconSize: 18,
+    rightOffset: 12,
+    clusterGap: 8,
+    contentGap: 12
+  }
+};
+function padNumber(value, length = 2) {
+  return String(value).padStart(length, "0");
+}
+function escapeRegExp(value) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function isValidDateInstance(value) {
+  return !Number.isNaN(value.getTime());
+}
+function createValidatedDate(year, month, day, hour = 0, minute = 0) {
+  const nextDate = new Date(year, month - 1, day, hour, minute, 0, 0);
+  if (!isValidDateInstance(nextDate)) {
+    return null;
+  }
+  if (nextDate.getFullYear() !== year || nextDate.getMonth() !== month - 1 || nextDate.getDate() !== day || nextDate.getHours() !== hour || nextDate.getMinutes() !== minute) {
+    return null;
+  }
+  return nextDate;
+}
+function normalizeDatePrecision(date, mode) {
+  if (mode === "date") {
+    return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0, 0);
+  }
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), 0, 0);
+}
+function toLocalInputValue(date, mode) {
+  const normalizedDate = normalizeDatePrecision(date, mode);
+  const datePart = `${normalizedDate.getFullYear()}-${padNumber(normalizedDate.getMonth() + 1)}-${padNumber(normalizedDate.getDate())}`;
+  if (mode === "date") {
+    return datePart;
+  }
+  return `${datePart}T${padNumber(normalizedDate.getHours())}:${padNumber(normalizedDate.getMinutes())}`;
+}
+function parseHtmlDateLikeValue(value) {
+  const trimmedValue = value.trim();
+  const dateMatch = HTML_DATE_PATTERN.exec(trimmedValue);
+  if (dateMatch) {
+    return createValidatedDate(
+      Number(dateMatch[1]),
+      Number(dateMatch[2]),
+      Number(dateMatch[3])
+    );
+  }
+  const datetimeMatch = HTML_DATETIME_PATTERN.exec(trimmedValue);
+  if (datetimeMatch) {
+    return createValidatedDate(
+      Number(datetimeMatch[1]),
+      Number(datetimeMatch[2]),
+      Number(datetimeMatch[3]),
+      Number(datetimeMatch[4]),
+      Number(datetimeMatch[5])
+    );
+  }
+  return null;
+}
+function parseFormattedDateValue(value, format, mode) {
+  const orderedParts = [];
+  let expression = "^";
+  for (let index = 0; index < format.length; ) {
+    const token = FORMAT_TOKENS.find(({ token: currentToken }) => format.startsWith(currentToken, index));
+    if (token) {
+      expression += token.pattern;
+      orderedParts.push(token.key);
+      index += token.token.length;
+      continue;
+    }
+    expression += escapeRegExp(format[index]);
+    index += 1;
+  }
+  expression += "$";
+  const match = new RegExp(expression).exec(value.trim());
+  if (!match) {
+    return null;
+  }
+  const resolvedParts = {
+    year: 0,
+    month: 1,
+    day: 1,
+    hour: 0,
+    minute: 0
+  };
+  orderedParts.forEach((key, index) => {
+    resolvedParts[key] = Number(match[index + 1]);
+  });
+  if (!resolvedParts.year || !resolvedParts.month || !resolvedParts.day) {
+    return null;
+  }
+  return createValidatedDate(
+    resolvedParts.year,
+    resolvedParts.month,
+    resolvedParts.day,
+    mode === "datetime" ? resolvedParts.hour : 0,
+    mode === "datetime" ? resolvedParts.minute : 0
+  );
+}
+function parseDateValue(value, mode, format) {
+  if (value == null || value === "") {
+    return null;
+  }
+  if (value instanceof Date) {
+    return isValidDateInstance(value) ? normalizeDatePrecision(value, mode) : null;
+  }
+  if (typeof value !== "string") {
+    return null;
+  }
+  const parsedFormattedDate = parseFormattedDateValue(value, format, mode);
+  if (parsedFormattedDate) {
+    return normalizeDatePrecision(parsedFormattedDate, mode);
+  }
+  const parsedHtmlDate = parseHtmlDateLikeValue(value);
+  if (parsedHtmlDate) {
+    return normalizeDatePrecision(parsedHtmlDate, mode);
+  }
+  const parsedNativeDate = new Date(value);
+  return isValidDateInstance(parsedNativeDate) ? normalizeDatePrecision(parsedNativeDate, mode) : null;
+}
+function formatDateValue(date, format) {
+  return FORMAT_TOKENS.reduce((currentFormat, token) => {
+    return currentFormat.split(token.token).join(token.formatter(date));
+  }, format);
+}
+function getLaterDate(leftDate, rightDate) {
+  if (!leftDate) return rightDate;
+  if (!rightDate) return leftDate;
+  return leftDate.getTime() >= rightDate.getTime() ? leftDate : rightDate;
+}
+function getEarlierDate(leftDate, rightDate) {
+  if (!leftDate) return rightDate;
+  if (!rightDate) return leftDate;
+  return leftDate.getTime() <= rightDate.getTime() ? leftDate : rightDate;
+}
+function CalendarIcon({ size }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: size, height: size, viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("rect", { x: "3", y: "4.5", width: "14", height: "12.5", rx: "3", stroke: "currentColor", strokeWidth: "1.6" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M6.25 2.75V6", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M13.75 2.75V6", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M3 7.5H17", stroke: "currentColor", strokeWidth: "1.6" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx: "10", cy: "11.5", r: "1.2", fill: "currentColor" })
+  ] });
+}
+function ClearIcon({ size }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: size, height: size, viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M5 5L15 15", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M15 5L5 15", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" })
+  ] });
+}
+function DatePicker({
+  label,
+  hint,
+  error,
+  controlSize = "md",
+  value,
+  defaultValue,
+  onChange,
+  mode = "date",
+  format,
+  allowPastDates = true,
+  allowFutureDates = true,
+  minDate,
+  maxDate,
+  minuteStep = 5,
+  clearable = true,
+  showPickerButton = true,
+  isDateUnavailable,
+  invalidDateMessage,
+  unavailableDateMessage,
+  pickerButtonLabel,
+  clearButtonLabel,
+  id,
+  name,
+  disabled,
+  readOnly,
+  required,
+  style,
+  className,
+  placeholder,
+  onBlur,
+  onFocus,
+  onKeyDown,
+  ...rest
+}) {
+  var _a;
+  const { theme, focusRing } = useUiKitTheme();
+  const controlMetrics = getControlMetrics(controlSize);
+  const accessoryMetrics = ACCESSORY_METRICS_BY_SIZE[controlSize];
+  const generatedIdRef = (0, import_react7.useRef)();
+  const visibleInputRef = (0, import_react7.useRef)(null);
+  const nativeInputRef = (0, import_react7.useRef)(null);
+  const [internalError, setInternalError] = (0, import_react7.useState)();
+  const 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";
+  if (!generatedIdRef.current) {
+    generatedIdRef.current = `ss-date-picker-${Math.random().toString(36).slice(2, 10)}`;
+  }
+  const resolvedId = id != null ? id : generatedIdRef.current;
+  const normalizedDefaultValue = (0, import_react7.useMemo)(() => {
+    const parsedDefaultValue = parseDateValue(defaultValue, mode, resolvedFormat);
+    return parsedDefaultValue ? toLocalInputValue(parsedDefaultValue, mode) : null;
+  }, [defaultValue, mode, resolvedFormat]);
+  const [uncontrolledValue, setUncontrolledValue] = (0, import_react7.useState)(normalizedDefaultValue);
+  const committedDate = (0, import_react7.useMemo)(() => {
+    const sourceValue = isControlled ? value : uncontrolledValue;
+    return parseDateValue(sourceValue, mode, resolvedFormat);
+  }, [isControlled, mode, resolvedFormat, uncontrolledValue, value]);
+  const committedValue = committedDate ? toLocalInputValue(committedDate, mode) : null;
+  const committedDisplayValue = committedDate ? formatDateValue(committedDate, resolvedFormat) : "";
+  const [draftValue, setDraftValue] = (0, import_react7.useState)(committedDisplayValue);
+  (0, import_react7.useEffect)(() => {
+    setDraftValue(committedDisplayValue);
+    setInternalError(void 0);
+  }, [committedDisplayValue]);
+  (0, import_react7.useEffect)(() => {
+    if (!isControlled) {
+      setUncontrolledValue((currentValue) => {
+        if (currentValue == null) {
+          return currentValue;
+        }
+        const parsedCurrentValue = parseDateValue(currentValue, mode, resolvedFormat);
+        return parsedCurrentValue ? toLocalInputValue(parsedCurrentValue, mode) : null;
+      });
+    }
+  }, [isControlled, mode, resolvedFormat]);
+  const parsedMinDate = (0, import_react7.useMemo)(() => {
+    const explicitMinDate = parseDateValue(minDate, mode, resolvedFormat);
+    const guardedMinDate = allowPastDates ? null : normalizeDatePrecision(/* @__PURE__ */ new Date(), mode);
+    return getLaterDate(explicitMinDate, guardedMinDate);
+  }, [allowPastDates, minDate, mode, resolvedFormat]);
+  const parsedMaxDate = (0, import_react7.useMemo)(() => {
+    const explicitMaxDate = parseDateValue(maxDate, mode, resolvedFormat);
+    const guardedMaxDate = allowFutureDates ? null : normalizeDatePrecision(/* @__PURE__ */ new Date(), mode);
+    return getEarlierDate(explicitMaxDate, guardedMaxDate);
+  }, [allowFutureDates, maxDate, mode, resolvedFormat]);
+  const hasExternalError = error !== void 0 && error !== null && error !== "";
+  const hasConfigurationConflict = Boolean(parsedMinDate && parsedMaxDate && parsedMinDate.getTime() > parsedMaxDate.getTime());
+  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 canOpenPicker = showPickerButton && !disabled && !readOnly && !hasConfigurationConflict;
+  const canClear = clearable && !disabled && !readOnly && !required && hasAnyValue;
+  const visibleButtonCount = Number(canOpenPicker) + Number(canClear);
+  const trailingInset = visibleButtonCount > 0 ? Math.max(
+    0,
+    accessoryMetrics.rightOffset + visibleButtonCount * accessoryMetrics.buttonSize + (visibleButtonCount - 1) * accessoryMetrics.clusterGap + accessoryMetrics.contentGap - controlMetrics.paddingX
+  ) : 0;
+  const getValidationMessage = (parsedDate) => {
+    if (parsedMinDate && parsedDate.getTime() < parsedMinDate.getTime()) {
+      return `Choose a value on or after ${formatDateValue(parsedMinDate, resolvedFormat)}.`;
+    }
+    if (parsedMaxDate && parsedDate.getTime() > parsedMaxDate.getTime()) {
+      return `Choose a value on or before ${formatDateValue(parsedMaxDate, resolvedFormat)}.`;
+    }
+    if (mode === "datetime" && minuteStep > 1 && parsedDate.getMinutes() % minuteStep !== 0) {
+      return `Minutes must use ${minuteStep}-minute intervals.`;
+    }
+    if (isDateUnavailable == null ? void 0 : isDateUnavailable(parsedDate)) {
+      return unavailableDateMessage != null ? unavailableDateMessage : "This date is not available.";
+    }
+    return void 0;
+  };
+  const emitChange = (nextValue, context) => {
+    onChange == null ? void 0 : onChange(nextValue, context);
+  };
+  const commitValue = (nextValue, reason) => {
+    if (hasConfigurationConflict) {
+      setInternalError("Current date rules do not allow any selection.");
+      return false;
+    }
+    if (!nextValue) {
+      if (!isControlled) {
+        setUncontrolledValue(null);
+      }
+      setDraftValue("");
+      setInternalError(void 0);
+      emitChange(null, {
+        reason,
+        date: null,
+        nativeValue: "",
+        displayValue: ""
+      });
+      return true;
+    }
+    const parsedDate = parseHtmlDateLikeValue(nextValue);
+    if (!parsedDate) {
+      setInternalError(invalidDateMessage != null ? invalidDateMessage : `Enter a valid value using ${resolvedFormat}.`);
+      return false;
+    }
+    const normalizedDate = normalizeDatePrecision(parsedDate, mode);
+    const validationMessage = getValidationMessage(normalizedDate);
+    if (validationMessage) {
+      setInternalError(validationMessage);
+      return false;
+    }
+    const normalizedValue = toLocalInputValue(normalizedDate, mode);
+    const displayValue = formatDateValue(normalizedDate, resolvedFormat);
+    if (!isControlled) {
+      setUncontrolledValue(normalizedValue);
+    }
+    setDraftValue(displayValue);
+    setInternalError(void 0);
+    emitChange(normalizedValue, {
+      reason,
+      date: normalizedDate,
+      nativeValue: normalizedValue,
+      displayValue
+    });
+    return true;
+  };
+  const commitDraftValue = () => {
+    var _a2, _b;
+    const trimmedDraftValue = draftValue.trim();
+    if (!trimmedDraftValue) {
+      return commitValue(null, "clear");
+    }
+    const parsedDraftDate = (_b = (_a2 = parseFormattedDateValue(trimmedDraftValue, resolvedFormat, mode)) != null ? _a2 : parseHtmlDateLikeValue(trimmedDraftValue)) != null ? _b : parseDateValue(trimmedDraftValue, mode, resolvedFormat);
+    if (!parsedDraftDate) {
+      setInternalError(invalidDateMessage != null ? invalidDateMessage : `Enter a valid value using ${resolvedFormat}.`);
+      return false;
+    }
+    return commitValue(toLocalInputValue(parsedDraftDate, mode), "input");
+  };
+  const openNativePicker = () => {
+    var _a2, _b;
+    if (!canOpenPicker || !nativeInputRef.current) {
+      return;
+    }
+    const parsedDraftDate = draftValue.trim() ? (_a2 = parseFormattedDateValue(draftValue, resolvedFormat, mode)) != null ? _a2 : parseHtmlDateLikeValue(draftValue) : null;
+    if (parsedDraftDate) {
+      nativeInputRef.current.value = toLocalInputValue(parsedDraftDate, mode);
+    }
+    const pickerInput = nativeInputRef.current;
+    try {
+      if (pickerInput.showPicker) {
+        pickerInput.showPicker();
+        return;
+      }
+      pickerInput.focus();
+    } catch {
+      (_b = visibleInputRef.current) == null ? void 0 : _b.focus();
+    }
+  };
+  const inputStyle = {
+    width: "100%",
+    boxSizing: "border-box",
+    height: controlMetrics.height,
+    borderRadius: 16,
+    border: `1px solid ${resolvedError ? theme.colors.negative : withAlpha(theme.colors.textLight, 0.5)}`,
+    backgroundColor: theme.colors.surface,
+    color: theme.colors.text,
+    cursor: disabled ? "not-allowed" : readOnly ? "default" : "text",
+    opacity: disabled ? 0.7 : 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)}` : `0 0 0 0 ${focusRing}`,
+    transition: "border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease",
+    ...style
+  };
+  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 ? 0.5 : 1
+  };
+  const input = /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { position: "relative", width: "100%" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "input",
+      {
+        ...rest,
+        ref: visibleInputRef,
+        id: resolvedId,
+        className,
+        type: "text",
+        value: draftValue,
+        disabled,
+        readOnly,
+        required,
+        placeholder: placeholder != null ? placeholder : resolvedFormat,
+        autoComplete: (_a = rest.autoComplete) != null ? _a : "off",
+        spellCheck: false,
+        "aria-invalid": Boolean(resolvedError),
+        onChange: (event) => {
+          setDraftValue(event.target.value);
+          setInternalError(void 0);
+        },
+        onFocus: (event) => {
+          setInternalError(void 0);
+          onFocus == null ? void 0 : onFocus(event);
+        },
+        onBlur: (event) => {
+          commitDraftValue();
+          onBlur == null ? void 0 : onBlur(event);
+        },
+        onKeyDown: (event) => {
+          onKeyDown == null ? void 0 : onKeyDown(event);
+          if (event.defaultPrevented) {
+            return;
+          }
+          if (event.key === "Enter") {
+            event.preventDefault();
+            commitDraftValue();
+            return;
+          }
+          if (event.key === "Escape") {
+            event.preventDefault();
+            setDraftValue(committedDisplayValue);
+            setInternalError(void 0);
+          }
+        },
+        style: inputStyle
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "input",
+      {
+        ref: nativeInputRef,
+        tabIndex: -1,
+        "aria-hidden": "true",
+        name,
+        type: nativePickerType,
+        value: committedValue != null ? committedValue : "",
+        min: parsedMinDate ? toLocalInputValue(parsedMinDate, mode) : void 0,
+        max: parsedMaxDate ? toLocalInputValue(parsedMaxDate, mode) : void 0,
+        step: mode === "datetime" ? Math.max(1, minuteStep) * 60 : void 0,
+        disabled: disabled || readOnly || hasConfigurationConflict,
+        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"
+        }
+      }
+    ),
+    visibleButtonCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          top: "50%",
+          right: accessoryMetrics.rightOffset,
+          transform: "translateY(-50%)",
+          display: "inline-flex",
+          alignItems: "center",
+          gap: accessoryMetrics.clusterGap
+        },
+        children: [
+          canClear ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            "button",
+            {
+              type: "button",
+              "aria-label": clearButtonLabel != null ? clearButtonLabel : "Clear date",
+              disabled: disabled || readOnly,
+              onMouseDown: (event) => {
+                event.preventDefault();
+              },
+              onClick: () => {
+                var _a2;
+                commitValue(null, "clear");
+                (_a2 = visibleInputRef.current) == null ? void 0 : _a2.focus();
+              },
+              style: accessoryButtonStyle,
+              children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ClearIcon, { size: accessoryMetrics.iconSize })
+            }
+          ) : null,
+          canOpenPicker ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            "button",
+            {
+              type: "button",
+              "aria-label": pickerButtonLabel != null ? pickerButtonLabel : mode === "datetime" ? "Open date and time picker" : "Open date picker",
+              disabled: disabled || readOnly || hasConfigurationConflict,
+              onMouseDown: (event) => {
+                event.preventDefault();
+              },
+              onClick: openNativePicker,
+              style: accessoryButtonStyle,
+              children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CalendarIcon, { size: accessoryMetrics.iconSize })
+            }
+          ) : null
+        ]
+      }
+    ) : null
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    ControlFrame,
     {
-      "aria-labelledby": "modal-title",
-      "aria-modal": "true",
-      role: "dialog",
+      label,
+      hint,
+      error: resolvedError,
+      htmlFor: resolvedId,
+      required,
+      children: input
+    }
+  );
+}
+
+// src/components/Select.tsx
+var import_react8 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var MENU_OFFSET = 8;
+var MENU_MAX_HEIGHT = 280;
+var getOptionPadding = (size) => {
+  if (size === "sm") return "10px 12px";
+  if (size === "lg") return "14px 16px";
+  return "12px 14px";
+};
+function getTextContent(node) {
+  if (node == null || typeof node === "boolean") {
+    return "";
+  }
+  if (typeof node === "string" || typeof node === "number") {
+    return String(node);
+  }
+  if (Array.isArray(node)) {
+    return node.map(getTextContent).join("");
+  }
+  if ((0, import_react8.isValidElement)(node)) {
+    return getTextContent(node.props.children);
+  }
+  return "";
+}
+function normalizeSelectValue(value) {
+  if (Array.isArray(value)) {
+    return value.length > 0 ? normalizeSelectValue(value[0]) : "";
+  }
+  return value == null ? "" : String(value);
+}
+function normalizeSelectValues(value) {
+  if (Array.isArray(value)) {
+    return value.map((item) => normalizeSelectValue(item));
+  }
+  if (value == null) {
+    return [];
+  }
+  return [normalizeSelectValue(value)];
+}
+function buildOption(keyPrefix, index, props, groupLabel, groupDisabled = false) {
+  var _a;
+  const rawValue = props.value !== void 0 ? props.value : getTextContent(props.children).trim();
+  const normalizedValue = normalizeSelectValue(rawValue);
+  return {
+    key: `${keyPrefix}-${index}-${normalizedValue}`,
+    value: normalizedValue,
+    label: (_a = props.children) != null ? _a : normalizedValue,
+    disabled: groupDisabled || Boolean(props.disabled)
+  };
+}
+function parseSelectChildren(children) {
+  const groups = [];
+  const standaloneOptions = [];
+  let optionIndex = 0;
+  let groupIndex = 0;
+  const flushStandaloneOptions = () => {
+    if (standaloneOptions.length === 0) {
+      return;
+    }
+    groups.push({
+      key: `standalone-${groups.length}`,
+      options: [...standaloneOptions]
+    });
+    standaloneOptions.length = 0;
+  };
+  import_react8.Children.forEach(children, (child) => {
+    if (!(0, import_react8.isValidElement)(child)) {
+      return;
+    }
+    if (child.type === "option") {
+      standaloneOptions.push(buildOption("option", optionIndex, child.props));
+      optionIndex += 1;
+      return;
+    }
+    if (child.type !== "optgroup") {
+      return;
+    }
+    flushStandaloneOptions();
+    const groupOptions = [];
+    let groupOptionIndex = 0;
+    import_react8.Children.forEach(child.props.children, (optionChild) => {
+      if (!(0, import_react8.isValidElement)(optionChild) || optionChild.type !== "option") {
+        return;
+      }
+      groupOptions.push(
+        buildOption(
+          `group-${groupIndex}-option`,
+          groupOptionIndex,
+          optionChild.props,
+          child.props.label,
+          Boolean(child.props.disabled)
+        )
+      );
+      groupOptionIndex += 1;
+    });
+    if (groupOptions.length > 0) {
+      groups.push({
+        key: `group-${groupIndex}`,
+        label: child.props.label,
+        options: groupOptions
+      });
+      groupIndex += 1;
+    }
+  });
+  flushStandaloneOptions();
+  return groups;
+}
+function filterSelectGroups(groups, query) {
+  const normalizedQuery = query.trim().toLowerCase();
+  if (!normalizedQuery) {
+    return groups;
+  }
+  return groups.map((group) => ({
+    ...group,
+    options: group.options.filter((option) => {
+      const optionText = getTextContent(option.label).trim().toLowerCase();
+      return optionText.includes(normalizedQuery);
+    })
+  })).filter((group) => group.options.length > 0);
+}
+function Select({
+  label,
+  hint,
+  error,
+  controlSize = "md",
+  id,
+  disabled,
+  style,
+  children,
+  value,
+  defaultValue,
+  onChange,
+  onFocus,
+  onBlur,
+  onKeyDown,
+  onClick,
+  autoFocus,
+  className,
+  isMulti,
+  isFilterable,
+  multiple,
+  ...rest
+}) {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  const { theme, mutedText, surfaceRaised } = useUiKitTheme();
+  const generatedId = (0, import_react8.useId)().replace(/:/g, "");
+  const resolvedId = id != null ? id : `ss-select-${generatedId}`;
+  const isMultiSelect = Boolean(isMulti || multiple);
+  const hasFilter = Boolean(isFilterable);
+  const groups = parseSelectChildren(children);
+  const flatOptions = groups.flatMap((group) => group.options);
+  const enabledOptions = flatOptions.filter((option) => !option.disabled);
+  const isControlled = value !== void 0;
+  const fallbackValues = defaultValue !== void 0 ? normalizeSelectValues(defaultValue) : isMultiSelect ? [] : ((_a = enabledOptions[0]) == null ? void 0 : _a.value) ? [enabledOptions[0].value] : [];
+  const [uncontrolledValues, setUncontrolledValues] = (0, import_react8.useState)(fallbackValues);
+  const [isOpen, setIsOpen] = (0, import_react8.useState)(false);
+  const [filterQuery, setFilterQuery] = (0, import_react8.useState)("");
+  const [menuPlacement, setMenuPlacement] = (0, import_react8.useState)("bottom");
+  const [isPlacementResolved, setIsPlacementResolved] = (0, import_react8.useState)(false);
+  const [highlightedValue, setHighlightedValue] = (0, import_react8.useState)((_d = (_c = fallbackValues[0]) != null ? _c : (_b = enabledOptions[0]) == null ? void 0 : _b.value) != null ? _d : "");
+  const shellRef = (0, import_react8.useRef)(null);
+  const buttonRef = (0, import_react8.useRef)(null);
+  const menuRef = (0, import_react8.useRef)(null);
+  const searchInputRef = (0, import_react8.useRef)(null);
+  const hiddenSelectRef = (0, import_react8.useRef)(null);
+  const selectedValues = isControlled ? normalizeSelectValues(value) : uncontrolledValues;
+  const selectedValue = (_e = selectedValues[0]) != null ? _e : "";
+  const selectedOptions = flatOptions.filter((option) => selectedValues.includes(option.value));
+  const selectedOption = (_f = selectedOptions[0]) != null ? _f : null;
+  const displayLabel = isMultiSelect ? selectedOptions.length > 0 ? selectedOptions.map((option) => getTextContent(option.label).trim() || option.value).join(", ") : null : (_g = selectedOption == null ? void 0 : selectedOption.label) != null ? _g : selectedValue ? selectedValue : null;
+  const displayContent = displayLabel != null ? displayLabel : "\xA0";
+  const visibleGroups = hasFilter ? filterSelectGroups(groups, filterQuery) : groups;
+  const visibleOptions = visibleGroups.flatMap((group) => group.options);
+  const visibleEnabledOptions = visibleOptions.filter((option) => !option.disabled);
+  const visibleEnabledValues = visibleEnabledOptions.map((option) => option.value);
+  const selectedValuesKey = selectedValues.join("\0");
+  const visibleEnabledValuesKey = visibleEnabledValues.join("\0");
+  const indicatorOffset = getSelectIndicatorOffset(controlSize);
+  const controlMetrics = getControlMetrics(controlSize);
+  const listboxId = `${resolvedId}-listbox`;
+  const scrollbarThumbColor = withAlpha(theme.colors.onSurface, 0.22);
+  const scrollbarThumbHoverColor = withAlpha(theme.colors.onSurface, 0.32);
+  const highlightedOption = (_h = visibleOptions.find((option) => option.value === highlightedValue)) != null ? _h : null;
+  const optionHoverBackground = withAlpha(theme.colors.primary, 1);
+  const optionSelectedBackground = withAlpha(theme.colors.primary, 1);
+  const triggerShadow = error ? `0 0 0 3px ${withAlpha(theme.colors.negative, 0.12)}` : "none";
+  const buttonPassthroughProps = Object.fromEntries(
+    Object.entries(rest).filter(([key]) => key.startsWith("aria-") || key.startsWith("data-"))
+  );
+  (0, import_react8.useEffect)(() => {
+    var _a2, _b2, _c2, _d2;
+    if (isControlled) {
+      return;
+    }
+    const invalidValues = uncontrolledValues.filter(
+      (currentValue) => !flatOptions.some((option) => option.value === currentValue)
+    );
+    if (invalidValues.length === 0) {
+      return;
+    }
+    const nextValues = defaultValue !== void 0 ? normalizeSelectValues(defaultValue).filter(
+      (currentValue) => flatOptions.some((option) => option.value === currentValue)
+    ) : isMultiSelect ? [] : ((_a2 = enabledOptions[0]) == null ? void 0 : _a2.value) ? [enabledOptions[0].value] : [];
+    setUncontrolledValues(nextValues);
+    setHighlightedValue((_d2 = (_c2 = nextValues[0]) != null ? _c2 : (_b2 = enabledOptions[0]) == null ? void 0 : _b2.value) != null ? _d2 : "");
+  }, [children, defaultValue, enabledOptions, flatOptions, isControlled, isMultiSelect, uncontrolledValues]);
+  (0, import_react8.useEffect)(() => {
+    var _a2, _b2, _c2;
+    if (!isOpen) {
+      setMenuPlacement("bottom");
+      setIsPlacementResolved(false);
+      return;
+    }
+    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]);
+  (0, import_react8.useEffect)(() => {
+    var _a2;
+    if (!isOpen || !hasFilter) {
+      return;
+    }
+    (_a2 = searchInputRef.current) == null ? void 0 : _a2.focus();
+  }, [hasFilter, isOpen]);
+  (0, import_react8.useEffect)(() => {
+    if (!isOpen) {
+      return;
+    }
+    const frameId = window.requestAnimationFrame(() => {
+      var _a2;
+      const triggerRect = (_a2 = buttonRef.current) == null ? void 0 : _a2.getBoundingClientRect();
+      const menuElement = menuRef.current;
+      if (!triggerRect || !menuElement) {
+        setMenuPlacement("bottom");
+        setIsPlacementResolved(true);
+        return;
+      }
+      const measuredMenuHeight = menuElement.getBoundingClientRect().height;
+      const menuHeight = Math.min(measuredMenuHeight || menuElement.scrollHeight, MENU_MAX_HEIGHT);
+      const availableBelow = window.innerHeight - triggerRect.bottom - MENU_OFFSET;
+      const availableAbove = triggerRect.top - MENU_OFFSET;
+      const nextPlacement = availableBelow < menuHeight && availableAbove >= menuHeight ? "top" : "bottom";
+      setMenuPlacement(nextPlacement);
+      setIsPlacementResolved(true);
+    });
+    return () => {
+      window.cancelAnimationFrame(frameId);
+    };
+  }, [isOpen, visibleOptions.length]);
+  (0, import_react8.useEffect)(() => {
+    if (isOpen) {
+      return;
+    }
+    setFilterQuery("");
+  }, [isOpen]);
+  (0, import_react8.useEffect)(() => {
+    if (!isOpen) {
+      return;
+    }
+    const handlePointerDown = (event) => {
+      var _a2;
+      if ((_a2 = shellRef.current) == null ? void 0 : _a2.contains(event.target)) {
+        return;
+      }
+      setIsOpen(false);
+    };
+    document.addEventListener("pointerdown", handlePointerDown);
+    return () => {
+      document.removeEventListener("pointerdown", handlePointerDown);
+    };
+  }, [isOpen]);
+  (0, import_react8.useEffect)(() => {
+    var _a2;
+    if (isControlled) {
+      return;
+    }
+    const form = (_a2 = hiddenSelectRef.current) == null ? void 0 : _a2.form;
+    if (!form) {
+      return;
+    }
+    const handleReset = () => {
+      queueMicrotask(() => {
+        var _a3, _b2, _c2, _d2;
+        const nextValues = defaultValue !== void 0 ? normalizeSelectValues(defaultValue) : isMultiSelect ? [] : ((_a3 = enabledOptions[0]) == null ? void 0 : _a3.value) ? [enabledOptions[0].value] : [];
+        setUncontrolledValues(nextValues);
+        setHighlightedValue((_d2 = (_c2 = nextValues[0]) != null ? _c2 : (_b2 = enabledOptions[0]) == null ? void 0 : _b2.value) != null ? _d2 : "");
+        setIsOpen(false);
+      });
+    };
+    form.addEventListener("reset", handleReset);
+    return () => {
+      form.removeEventListener("reset", handleReset);
+    };
+  }, [defaultValue, enabledOptions, isControlled, isMultiSelect]);
+  const syncHiddenSelect = (nextValues) => {
+    var _a2, _b2;
+    const selectElement = hiddenSelectRef.current;
+    if (!selectElement) {
+      return;
+    }
+    if (isMultiSelect) {
+      Array.from(selectElement.options).forEach((optionElement) => {
+        optionElement.selected = nextValues.includes(optionElement.value);
+      });
+    } else {
+      const descriptor = Object.getOwnPropertyDescriptor(HTMLSelectElement.prototype, "value");
+      if (descriptor == null ? void 0 : descriptor.set) {
+        descriptor.set.call(selectElement, (_a2 = nextValues[0]) != null ? _a2 : "");
+      } else {
+        selectElement.value = (_b2 = nextValues[0]) != null ? _b2 : "";
+      }
+    }
+    selectElement.dispatchEvent(new Event("change", { bubbles: true }));
+  };
+  const updateMultiSelection = (nextValues) => {
+    var _a2, _b2, _c2;
+    if (!isMultiSelect || disabled) {
+      return;
+    }
+    if (!isControlled) {
+      setUncontrolledValues(nextValues);
+    }
+    setHighlightedValue((_c2 = (_b2 = nextValues[nextValues.length - 1]) != null ? _b2 : (_a2 = enabledOptions[0]) == null ? void 0 : _a2.value) != null ? _c2 : "");
+    syncHiddenSelect(nextValues);
+  };
+  const toggleVisibleSelection = (checked) => {
+    if (!isMultiSelect || disabled || visibleEnabledValues.length === 0) {
+      return;
+    }
+    const nextValues = checked ? Array.from(/* @__PURE__ */ new Set([...selectedValues, ...visibleEnabledValues])) : selectedValues.filter((currentValue) => !visibleEnabledValues.includes(currentValue));
+    updateMultiSelection(nextValues);
+  };
+  const commitSelection = (nextValue) => {
+    var _a2;
+    if (disabled) {
+      if (!isMultiSelect) {
+        setIsOpen(false);
+      }
+      return;
+    }
+    if (isMultiSelect) {
+      const nextValues = selectedValues.includes(nextValue) ? selectedValues.filter((currentValue) => currentValue !== nextValue) : [...selectedValues, nextValue];
+      updateMultiSelection(nextValues);
+      return;
+    }
+    if (nextValue === selectedValue) {
+      setIsOpen(false);
+      return;
+    }
+    if (!isControlled) {
+      setUncontrolledValues([nextValue]);
+    }
+    setHighlightedValue(nextValue);
+    setIsOpen(false);
+    syncHiddenSelect([nextValue]);
+    (_a2 = buttonRef.current) == null ? void 0 : _a2.focus();
+  };
+  const handleHiddenSelectChange = (event) => {
+    var _a2, _b2, _c2;
+    const nextValues = isMultiSelect ? Array.from(event.currentTarget.selectedOptions, (option) => option.value) : [event.currentTarget.value];
+    if (!isControlled) {
+      setUncontrolledValues(nextValues);
+    }
+    setHighlightedValue((_c2 = (_b2 = nextValues[nextValues.length - 1]) != null ? _b2 : (_a2 = enabledOptions[0]) == null ? void 0 : _a2.value) != null ? _c2 : "");
+    onChange == null ? void 0 : onChange(event);
+  };
+  const visibleSelectedCount = visibleEnabledValues.filter((currentValue) => selectedValues.includes(currentValue)).length;
+  const hasSomeVisibleSelected = visibleSelectedCount > 0 && visibleSelectedCount < visibleEnabledValues.length;
+  const hasAllVisibleSelected = visibleEnabledValues.length > 0 && visibleSelectedCount === visibleEnabledValues.length;
+  const canToggleVisibleSelection = !disabled && visibleEnabledValues.length > 0;
+  const bulkToggleControl = isMultiSelect ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "button",
+    {
+      type: "button",
+      role: "checkbox",
+      "aria-label": "Toggle all visible options",
+      "aria-checked": hasAllVisibleSelected ? true : hasSomeVisibleSelected ? "mixed" : false,
+      disabled: !canToggleVisibleSelection,
+      onMouseDown: (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+      },
+      onClick: (event) => {
+        event.stopPropagation();
+        toggleVisibleSelection(!hasAllVisibleSelected);
+      },
       style: {
-        background: `${modalTheme.colors.background}90`,
-        backdropFilter: "blur(2px)",
-        width: "100%",
-        height: "100%",
-        position: "fixed",
-        zIndex: 999,
-        top: 0,
-        left: 0,
-        display: "flex",
-        justifyContent: "center",
+        width: 20,
+        height: 20,
+        padding: 0,
+        margin: 0,
+        display: "inline-flex",
         alignItems: "center",
-        boxSizing: "border-box"
+        justifyContent: "center",
+        flexShrink: 0,
+        border: "none",
+        background: "transparent",
+        cursor: canToggleVisibleSelection ? "pointer" : "not-allowed",
+        opacity: canToggleVisibleSelection ? 1 : 0.45
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        CheckboxIndicator,
+        {
+          checked: hasAllVisibleSelected,
+          indeterminate: hasSomeVisibleSelected,
+          disabled: !canToggleVisibleSelection,
+          checkedColor: theme.colors.secondary,
+          iconColor: theme.colors.surface,
+          uncheckedBorderColor: withAlpha(theme.colors.onSurface, 0.22),
+          uncheckedBackgroundColor: theme.colors.surface
+        }
+      )
+    }
+  ) : null;
+  const moveHighlight = (direction) => {
+    if (visibleEnabledOptions.length === 0) {
+      return;
+    }
+    const currentIndex = visibleEnabledOptions.findIndex((option) => option.value === highlightedValue);
+    if (currentIndex === -1) {
+      setHighlightedValue(
+        direction === 1 ? visibleEnabledOptions[0].value : visibleEnabledOptions[visibleEnabledOptions.length - 1].value
+      );
+      return;
+    }
+    const nextIndex = Math.max(0, Math.min(visibleEnabledOptions.length - 1, currentIndex + direction));
+    setHighlightedValue(visibleEnabledOptions[nextIndex].value);
+  };
+  const handleTriggerClick = (event) => {
+    onClick == null ? void 0 : onClick(event);
+    if (event.defaultPrevented || disabled || flatOptions.length === 0) {
+      return;
+    }
+    setIsOpen((current) => !current);
+  };
+  const handleTriggerFocus = (event) => {
+    onFocus == null ? void 0 : onFocus(event);
+  };
+  const handleTriggerBlur = (event) => {
+    var _a2;
+    const nextTarget = event.relatedTarget;
+    if (!((_a2 = shellRef.current) == null ? void 0 : _a2.contains(nextTarget))) {
+      setIsOpen(false);
+    }
+    onBlur == null ? void 0 : onBlur(event);
+  };
+  const handleTriggerKeyDown = (event) => {
+    var _a2, _b2, _c2;
+    onKeyDown == null ? void 0 : onKeyDown(event);
+    if (event.defaultPrevented || disabled || visibleEnabledOptions.length === 0) {
+      return;
+    }
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      if (!isOpen) {
+        setIsOpen(true);
+        setHighlightedValue((_a2 = selectedOption == null ? void 0 : selectedOption.value) != null ? _a2 : visibleEnabledOptions[0].value);
+        return;
+      }
+      moveHighlight(1);
+      return;
+    }
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      if (!isOpen) {
+        setIsOpen(true);
+        setHighlightedValue((_b2 = selectedOption == null ? void 0 : selectedOption.value) != null ? _b2 : visibleEnabledOptions[visibleEnabledOptions.length - 1].value);
+        return;
+      }
+      moveHighlight(-1);
+      return;
+    }
+    if (event.key === "Home" && isOpen) {
+      event.preventDefault();
+      setHighlightedValue(visibleEnabledOptions[0].value);
+      return;
+    }
+    if (event.key === "End" && isOpen) {
+      event.preventDefault();
+      setHighlightedValue(visibleEnabledOptions[visibleEnabledOptions.length - 1].value);
+      return;
+    }
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      if (!isOpen) {
+        setIsOpen(true);
+        setHighlightedValue((_c2 = selectedOption == null ? void 0 : selectedOption.value) != null ? _c2 : visibleEnabledOptions[0].value);
+        return;
+      }
+      if (highlightedOption && !highlightedOption.disabled) {
+        commitSelection(highlightedOption.value);
+      }
+      return;
+    }
+    if (event.key === "Escape" && isOpen) {
+      event.preventDefault();
+      setIsOpen(false);
+      return;
+    }
+    if (event.key === "Tab") {
+      setIsOpen(false);
+    }
+  };
+  const handleFilterKeyDown = (event) => {
+    var _a2;
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      moveHighlight(1);
+      return;
+    }
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      moveHighlight(-1);
+      return;
+    }
+    if (event.key === "Enter") {
+      event.preventDefault();
+      if (highlightedOption && !highlightedOption.disabled) {
+        commitSelection(highlightedOption.value);
+      }
+      return;
+    }
+    if (event.key === "Escape") {
+      event.preventDefault();
+      setIsOpen(false);
+      (_a2 = buttonRef.current) == null ? void 0 : _a2.focus();
+      return;
+    }
+    if (event.key === "Tab") {
+      setIsOpen(false);
+    }
+  };
+  const select = /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { ref: shellRef, style: { position: "relative", width: "100%" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+      "button",
+      {
+        ...buttonPassthroughProps,
+        id: resolvedId,
+        ref: buttonRef,
+        type: "button",
+        className,
+        title: rest.title,
+        disabled: disabled || flatOptions.length === 0,
+        autoFocus,
+        tabIndex: rest.tabIndex,
+        role: "combobox",
+        "aria-controls": listboxId,
+        "aria-expanded": isOpen,
+        "aria-haspopup": "listbox",
+        "aria-invalid": error ? true : rest["aria-invalid"],
+        "aria-required": rest.required,
+        onClick: handleTriggerClick,
+        onFocus: handleTriggerFocus,
+        onBlur: handleTriggerBlur,
+        onKeyDown: handleTriggerKeyDown,
+        style: {
+          width: "100%",
+          boxSizing: "border-box",
+          height: controlMetrics.height,
+          borderRadius: 16,
+          border: `1px solid ${error ? theme.colors.negative : withAlpha(theme.colors.textLight, 0.5)}`,
+          backgroundColor: theme.colors.surface,
+          color: displayLabel ? theme.colors.onSurface : mutedText,
+          cursor: disabled ? "not-allowed" : "pointer",
+          opacity: disabled ? 0.7 : 1,
+          padding: getSelectControlPadding(controlSize),
+          outline: "none",
+          font: "inherit",
+          fontSize: controlMetrics.fontSize,
+          lineHeight: controlMetrics.lineHeight,
+          transition: "border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          gap: 12,
+          minWidth: 0,
+          textAlign: "left",
+          ...style
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "span",
+            {
+              style: {
+                display: "block",
+                flex: "1 1 auto",
+                minWidth: 0,
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap"
+              },
+              children: displayContent
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "span",
+            {
+              "aria-hidden": "true",
+              style: {
+                position: "absolute",
+                right: indicatorOffset,
+                top: "50%",
+                transform: `translateY(-50%) rotate(${isOpen ? 180 : 0}deg)`,
+                transformOrigin: "center",
+                color: disabled ? withAlpha(theme.colors.onSurface, 0.42) : mutedText,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                pointerEvents: "none",
+                transition: "transform 160ms ease, color 160ms ease"
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                "path",
+                {
+                  d: "M5.75 7.75L10 12l4.25-4.25",
+                  stroke: "currentColor",
+                  strokeWidth: "1.8",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              ) })
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "select",
+      {
+        ...rest,
+        id: `${resolvedId}-native`,
+        ref: hiddenSelectRef,
+        name: rest.name,
+        disabled,
+        multiple: isMultiSelect,
+        value: isMultiSelect ? selectedValues : selectedValue,
+        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%)"
+        },
+        children
+      }
+    ),
+    isOpen ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("style", { children: `
+              #${listboxId} {
+                scrollbar-width: thin;
+                scrollbar-color: ${scrollbarThumbColor} transparent;
+              }
+
+              #${listboxId}::-webkit-scrollbar {
+                width: 8px;
+              }
+
+              #${listboxId}::-webkit-scrollbar-track {
+                background: transparent;
+              }
+
+              #${listboxId}::-webkit-scrollbar-thumb {
+                background: ${scrollbarThumbColor};
+                border-radius: 999px;
+                border: 2px solid transparent;
+                background-clip: padding-box;
+              }
+
+              #${listboxId}::-webkit-scrollbar-thumb:hover {
+                background: ${scrollbarThumbHoverColor};
+                background-clip: padding-box;
+              }
+            ` }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
         "div",
         {
-          id: isLoading ? "ldg1" : void 0,
+          ref: menuRef,
           style: {
-            position: isMaximized ? "fixed" : "relative",
-            left: isMaximized ? 0 : void 0,
-            top: isMaximized ? 0 : void 0,
-            background: modalTheme.colors.background,
+            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 ${withAlpha(theme.colors.textLight, 0.5)}`,
+            backgroundColor: surfaceRaised,
+            // boxShadow: `0 10px 24px ${withAlpha(theme.colors.onSurface, 0.08)}`,
+            padding: 8,
+            backdropFilter: "blur(6px)",
+            visibility: isPlacementResolved ? "visible" : "hidden",
             display: "flex",
-            alignItems: "center",
             flexDirection: "column",
-            borderRadius: "0.8rem",
-            boxSizing: "border-box",
-            maxHeight: isMaximized ? "100vh" : "80vh",
-            maxWidth: isMaximized ? "100vw" : "80vw",
-            minWidth: isMaximized ? "100vw" : 300,
-            minHeight: isMaximized ? "100vh" : void 0,
-            width: isMaximized ? "100vw" : void 0,
-            boxShadow: "0 24px 64px rgba(15, 23, 42, 0.18)",
-            ...isLoading ? { opacity: 0.5 } : null,
-            ...style
+            gap: 4
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            hasFilter ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
               "div",
               {
                 style: {
-                  background: modalTheme.colors.surface,
-                  color: modalTheme.colors.onSurface,
-                  position: "absolute",
-                  top: 0,
-                  zIndex: 500,
                   display: "flex",
-                  justifyContent: "space-between",
                   alignItems: "center",
-                  width: "100%",
-                  height: "4rem",
-                  padding: "1rem",
-                  boxSizing: "border-box",
-                  borderTopLeftRadius: "0.8rem",
-                  borderTopRightRadius: "0.8rem",
-                  borderBottom: `1px solid ${withAlpha4(modalTheme.colors.onBackground, 0.1)}`
+                  justifyContent: "flex-start",
+                  gap: 8,
+                  padding: "4px 4px 10px",
+                  borderBottom: `1px solid ${withAlpha(theme.colors.onSurface, 0.08)}`,
+                  flexShrink: 0
                 },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { id: "modal-title", style: { fontWeight: "bold", fontSize: "1.3rem" }, children: title }),
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-                    "div",
+                  bulkToggleControl,
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    "input",
                     {
-                      id: "modal-header-icons",
-                      style: { display: "flex", alignItems: "center", gap: "0.5rem" },
-                      children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                          "button",
-                          {
-                            "aria-label": isMaximized ? "Minimize modal" : "Maximize modal",
-                            title: isMaximized ? "Minimize" : "Maximize",
-                            type: "button",
-                            onClick: () => setIsMaximized((current) => !current),
-                            style: {
-                              border: "none",
-                              background: "transparent",
-                              color: modalTheme.colors.onSurface,
-                              cursor: "pointer",
-                              fontSize: 18,
-                              lineHeight: 1,
-                              padding: 0
-                            },
-                            children: isMaximized ? "\u25A2" : "\u25A1"
-                          }
-                        ),
-                        !hideCloseIcon ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                          "button",
-                          {
-                            "aria-label": "Close modal",
-                            title: "Close",
-                            type: "button",
-                            onClick: isLoading ? void 0 : closeModal,
-                            style: {
-                              border: "none",
-                              background: "transparent",
-                              color: modalTheme.colors.onSurface,
-                              cursor: isLoading ? "not-allowed" : "pointer",
-                              fontSize: 22,
-                              lineHeight: 1,
-                              padding: 0,
-                              opacity: isLoading ? 0.5 : 1
-                            },
-                            children: "\xD7"
-                          }
-                        ) : null
-                      ]
+                      ref: searchInputRef,
+                      type: "search",
+                      value: filterQuery,
+                      onChange: (event) => {
+                        setFilterQuery(event.currentTarget.value);
+                      },
+                      onKeyDown: handleFilterKeyDown,
+                      onMouseDown: (event) => {
+                        event.stopPropagation();
+                      },
+                      placeholder: "Search options",
+                      "aria-label": "Search options",
+                      style: {
+                        flex: "1 1 auto",
+                        width: "100%",
+                        border: `1px solid ${withAlpha(theme.colors.textLight, 0.5)}`,
+                        backgroundColor: theme.colors.surface,
+                        padding: "8px 12px",
+                        borderRadius: 12,
+                        font: "inherit",
+                        fontSize: 12,
+                        lineHeight: 1.4,
+                        color: theme.colors.textLight,
+                        outline: "none",
+                        boxSizing: "border-box"
+                      }
                     }
                   )
                 ]
               }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            ) : isMultiSelect ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               "div",
               {
                 style: {
-                  scrollbarWidth: "thin",
-                  width: "100%",
-                  maxWidth: "100%",
-                  paddingTop: "4rem",
-                  paddingBottom: "4rem",
-                  overflow: "auto",
-                  ...bodyStyle
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "flex-start",
+                  padding: "4px 4px 10px",
+                  borderBottom: `1px solid ${withAlpha(theme.colors.onSurface, 0.08)}`,
+                  flexShrink: 0
                 },
-                children
+                children: bulkToggleControl
               }
-            ),
-            onlyCloseButton ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            ) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               "div",
               {
+                id: listboxId,
+                role: "listbox",
+                "aria-labelledby": resolvedId,
+                "aria-multiselectable": isMultiSelect || void 0,
                 style: {
-                  background: modalTheme.colors.surface,
-                  color: modalTheme.colors.onSurface,
-                  position: "absolute",
-                  bottom: 0,
-                  width: "100%",
-                  height: "4rem",
-                  padding: "0.5rem",
-                  borderTop: `1px solid ${withAlpha4(modalTheme.colors.onBackground, 0.1)}`,
-                  boxSizing: "border-box",
-                  borderBottomLeftRadius: "0.8rem",
-                  borderBottomRightRadius: "0.8rem"
+                  overflowY: "auto",
+                  overflowX: "hidden",
+                  minHeight: 0,
+                  flex: "1 1 auto"
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                children: visibleGroups.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   "div",
                   {
-                    className: "buttons-footer",
-                    style: { flex: 1, display: "flex", justifyContent: "end" },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                      LegacyActionButton,
-                      {
-                        label: "Close",
-                        onClick: closeModal,
-                        theme: modalTheme,
-                        disabled: isLoading
-                      }
-                    )
+                    style: {
+                      padding: "14px 12px",
+                      color: mutedText,
+                      fontSize: 13,
+                      textAlign: "center"
+                    },
+                    children: "No options found."
                   }
-                )
-              }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-              "div",
-              {
-                style: {
-                  background: modalTheme.colors.surface,
-                  color: modalTheme.colors.onSurface,
-                  position: "absolute",
-                  bottom: 0,
-                  width: "100%",
-                  height: "4rem",
-                  padding: "0.5rem",
-                  borderTop: `1px solid ${withAlpha4(modalTheme.colors.onBackground, 0.1)}`,
-                  boxSizing: "border-box",
-                  borderBottomLeftRadius: "0.8rem",
-                  borderBottomRightRadius: "0.8rem"
-                },
-                children: cancelButton ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                ) : visibleGroups.map((group) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
                   "div",
                   {
-                    className: "buttons-footer",
-                    style: { flex: 1, display: "flex", justifyContent: "end" },
+                    style: {
+                      display: "flex",
+                      flexDirection: "column",
+                      gap: 4,
+                      marginTop: group.label ? 4 : 0
+                    },
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                        LegacyActionButton,
+                      group.label ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                        "span",
                         {
-                          label: "Cancel",
-                          onClick: cancelButton,
-                          type: "text",
-                          style: { maxWidth: "100px" },
-                          theme: modalTheme,
-                          disabled: false
+                          style: {
+                            padding: "6px 8px 2px",
+                            color: mutedText,
+                            fontSize: 11,
+                            fontWeight: 800,
+                            letterSpacing: "0.08em",
+                            textTransform: "uppercase"
+                          },
+                          children: group.label
                         }
-                      ),
-                      actionButtons()
+                      ) : null,
+                      group.options.map((option) => {
+                        const isSelected = selectedValues.includes(option.value);
+                        const isHighlighted = option.value === highlightedValue;
+                        const isActive = isSelected || isHighlighted;
+                        return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                          "div",
+                          {
+                            role: "option",
+                            "aria-selected": isSelected,
+                            "aria-disabled": option.disabled,
+                            onMouseEnter: () => {
+                              if (!option.disabled) {
+                                setHighlightedValue(option.value);
+                              }
+                            },
+                            onMouseDown: (event) => {
+                              event.preventDefault();
+                            },
+                            onClick: () => {
+                              if (!option.disabled) {
+                                commitSelection(option.value);
+                              }
+                            },
+                            style: {
+                              display: "flex",
+                              alignItems: "center",
+                              justifyContent: "space-between",
+                              gap: 12,
+                              width: "100%",
+                              minWidth: 0,
+                              boxSizing: "border-box",
+                              borderRadius: 14,
+                              padding: getOptionPadding(controlSize),
+                              cursor: option.disabled ? "not-allowed" : "pointer",
+                              color: option.disabled ? withAlpha(theme.colors.onSurface, 0.38) : isActive ? theme.colors.onPrimary : theme.colors.onSurface,
+                              backgroundColor: isSelected ? optionSelectedBackground : isHighlighted ? optionHoverBackground : "transparent",
+                              fontWeight: isSelected ? 700 : 500,
+                              transition: "background-color 140ms ease, color 140ms ease"
+                            },
+                            children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                                "span",
+                                {
+                                  style: {
+                                    display: "flex",
+                                    alignItems: "center",
+                                    gap: 10,
+                                    flex: "1 1 auto",
+                                    minWidth: 0
+                                  },
+                                  children: [
+                                    isMultiSelect ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                                      CheckboxIndicator,
+                                      {
+                                        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.onSurface, 0.26),
+                                        uncheckedBackgroundColor: "transparent"
+                                      }
+                                    ) : null,
+                                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                                      "span",
+                                      {
+                                        style: {
+                                          display: "block",
+                                          flex: "1 1 auto",
+                                          minWidth: 0,
+                                          overflow: "hidden",
+                                          textOverflow: "ellipsis",
+                                          whiteSpace: "nowrap"
+                                        },
+                                        children: option.label
+                                      }
+                                    )
+                                  ]
+                                }
+                              ),
+                              !isMultiSelect && isSelected ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                                "span",
+                                {
+                                  "aria-hidden": "true",
+                                  style: {
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                    color: theme.colors.primary,
+                                    flexShrink: 0
+                                  },
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                                    "path",
+                                    {
+                                      d: "M5.75 10.25L8.5 13l5.75-6",
+                                      stroke: "currentColor",
+                                      strokeWidth: "1.8",
+                                      strokeLinecap: "round",
+                                      strokeLinejoin: "round"
+                                    }
+                                  ) })
+                                }
+                              ) : null
+                            ]
+                          },
+                          option.key
+                        );
+                      })
                     ]
-                  }
-                ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                  "div",
-                  {
-                    className: "buttons-footer",
-                    style: { flex: 1, display: "flex", justifyContent: "end" },
-                    children: actionButtons()
-                  }
-                )
+                  },
+                  group.key
+                ))
               }
             )
           ]
         }
       )
-    }
-  );
-}
-function Modal(props) {
-  if (isLegacyModalProps(props)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LegacyModal, { ...props });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StandardModal, { ...props });
-}
-
-// src/components/ComposableModal.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var createModalSlotIds = (slotBaseId) => ({
-  header: `${slotBaseId}:modal-header`,
-  body: `${slotBaseId}:modal-body`,
-  footer: `${slotBaseId}:modal-footer`
-});
-function ComposableModal({
-  sdk,
-  isOpen,
-  onClose,
-  title,
-  description,
-  slotBaseId,
-  payload,
-  onConfirm,
-  confirmLabel = "Confirm",
-  cancelLabel = "Cancel",
-  isBusy = false,
-  closeOnBackdrop = true,
-  closeOnEscape = true,
-  hideExpandButton = false,
-  maximized,
-  hideDefaultFooter = false,
-  maxWidth,
-  headerFallback,
-  footerFallback,
-  children
-}) {
-  const theme = useUiKitTheme(sdk);
-  const slotIds = createModalSlotIds(slotBaseId);
-  const context = (0, import_react4.useMemo)(
-    () => ({
-      title,
-      description,
-      payload,
-      close: onClose,
-      confirm: onConfirm,
-      confirmLabel,
-      cancelLabel,
-      isOpen,
-      isBusy
-    }),
-    [cancelLabel, confirmLabel, description, isBusy, isOpen, onClose, onConfirm, payload, title]
-  );
-  const defaultFooter = hideDefaultFooter ? void 0 : footerFallback != null ? footerFallback : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Button, { sdk, variant: "outline", tone: "neutral", onClick: onClose, disabled: isBusy, children: cancelLabel }),
-    onConfirm ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Button, { sdk, onClick: onConfirm, disabled: isBusy, children: confirmLabel }) : null
-  ] });
-  const defaultHeader = headerFallback != null ? headerFallback : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      "h2",
-      {
-        style: {
-          margin: 0,
-          fontSize: 30,
-          fontWeight: 800,
-          lineHeight: 1.1
-        },
-        children: title
-      }
-    ),
-    description ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      "p",
-      {
-        style: {
-          margin: 0,
-          fontSize: 15,
-          lineHeight: 1.6,
-          opacity: 0.78
-        },
-        children: description
-      }
-    ) : null
+    ] }) : null
   ] });
-  const headerContent = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_smartsell_sales_sdk4.SlotRenderer, { id: slotIds.header, sdk, context, children: defaultHeader });
-  const bodyContent = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_smartsell_sales_sdk4.SlotRenderer, { id: slotIds.body, sdk, context, children });
-  const footerContent = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_smartsell_sales_sdk4.SlotRenderer, { id: slotIds.footer, sdk, context, children: defaultFooter });
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    Modal,
-    {
-      isOpen,
-      onClose,
-      title,
-      description,
-      headerContent,
-      footer: footerContent,
-      theme,
-      maxWidth,
-      hideExpandButton,
-      maximized,
-      closeOnBackdrop,
-      closeOnEscape,
-      children: bodyContent
-    }
-  );
-}
-
-// src/components/Field.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-function Field({
-  sdk,
-  label,
-  hint,
-  error,
-  htmlFor,
-  required = false,
-  children,
-  style
-}) {
-  const { theme, mutedText } = useUiKitTheme(sdk);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-    "label",
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    ControlFrame,
     {
-      htmlFor,
-      style: {
-        display: "flex",
-        flexDirection: "column",
-        gap: 8,
-        width: "100%",
-        ...style
-      },
-      children: [
-        (label || hint) && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [
-          label ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-            "span",
-            {
-              style: {
-                color: theme.colors.onSurface,
-                fontSize: 14,
-                fontWeight: 700,
-                letterSpacing: "0.01em"
-              },
-              children: [
-                label,
-                required ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { color: theme.colors.negative, marginLeft: 4 }, children: "*" }) : null
-              ]
-            }
-          ) : null,
-          hint ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-            "span",
-            {
-              style: {
-                color: mutedText,
-                fontSize: 13,
-                lineHeight: 1.45
-              },
-              children: hint
-            }
-          ) : null
-        ] }),
-        children,
-        error ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          "span",
-          {
-            style: {
-              color: theme.colors.negative,
-              fontSize: 13,
-              fontWeight: 600,
-              lineHeight: 1.45
-            },
-            children: error
-          }
-        ) : null
-      ]
+      label,
+      hint,
+      error,
+      htmlFor: resolvedId,
+      required: rest.required,
+      useLabelWrapper: false,
+      children: select
     }
   );
 }
 
-// src/components/Input.tsx
-var import_smartsell_sales_sdk5 = require("smartsell-sales-sdk");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var getPadding = (size) => {
-  if (size === "sm") return "10px 12px";
-  if (size === "lg") return "16px 18px";
-  return "13px 16px";
-};
-function Input({
-  sdk,
-  label,
-  hint,
-  error,
-  controlSize = "md",
-  id,
-  disabled,
-  style,
-  ...rest
-}) {
-  const { theme, borderSoft, focusRing, surfaceMuted } = useUiKitTheme(sdk);
-  const inputStyle = {
-    width: "100%",
-    borderRadius: 16,
-    border: `1px solid ${error ? theme.colors.negative : borderSoft}`,
-    padding: getPadding(controlSize),
-    outline: "none",
-    color: theme.colors.onSurface,
-    backgroundColor: disabled ? surfaceMuted : theme.colors.surface,
-    boxShadow: error ? `0 0 0 3px ${(0, import_smartsell_sales_sdk5.withAlpha)(theme.colors.negative, 0.12)}` : `0 0 0 0 ${focusRing}`,
-    transition: "border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease",
-    ...style
-  };
-  const input = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { ...rest, id, disabled, style: inputStyle });
-  if (!label && !hint && !error) {
-    return input;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Field, { sdk, label, hint, error, htmlFor: id, children: input });
-}
-
-// src/components/Select.tsx
-var import_smartsell_sales_sdk6 = require("smartsell-sales-sdk");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var getPadding2 = (size) => {
-  if (size === "sm") return "10px 12px";
-  if (size === "lg") return "16px 18px";
-  return "13px 16px";
-};
-function Select({
-  sdk,
-  label,
-  hint,
-  error,
-  controlSize = "md",
-  id,
-  disabled,
-  style,
-  children,
-  ...rest
-}) {
-  const { theme, borderSoft, focusRing, surfaceMuted } = useUiKitTheme(sdk);
-  const selectStyle = {
-    width: "100%",
-    borderRadius: 16,
-    border: `1px solid ${error ? theme.colors.negative : borderSoft}`,
-    padding: getPadding2(controlSize),
-    outline: "none",
-    color: theme.colors.onSurface,
-    backgroundColor: disabled ? surfaceMuted : theme.colors.surface,
-    boxShadow: error ? `0 0 0 3px ${(0, import_smartsell_sales_sdk6.withAlpha)(theme.colors.negative, 0.12)}` : `0 0 0 0 ${focusRing}`,
-    transition: "border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease",
-    ...style
-  };
-  const select = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("select", { ...rest, id, disabled, style: selectStyle, children });
-  if (!label && !hint && !error) {
-    return select;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Field, { sdk, label, hint, error, htmlFor: id, children: select });
-}
-
 // src/components/Textarea.tsx
-var import_smartsell_sales_sdk7 = require("smartsell-sales-sdk");
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var getPadding3 = (size) => {
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var getPadding = (size) => {
   if (size === "sm") return "10px 12px";
   if (size === "lg") return "16px 18px";
   return "13px 16px";
 };
 function Textarea({
-  sdk,
   label,
   hint,
   error,
@@ -1231,32 +3110,33 @@ function Textarea({
   rows = 5,
   ...rest
 }) {
-  const { theme, borderSoft, focusRing, surfaceMuted } = useUiKitTheme(sdk);
+  const { theme, focusRing } = useUiKitTheme();
   const textareaStyle = {
+    border: `1px solid ${error ? theme.colors.negative : withAlpha(theme.colors.textLight, 0.5)}`,
+    backgroundColor: theme.colors.surface,
+    color: theme.colors.text,
+    cursor: disabled ? "not-allowed" : "text",
+    opacity: disabled ? 0.7 : 1,
     width: "100%",
+    boxSizing: "border-box",
     borderRadius: 16,
-    border: `1px solid ${error ? theme.colors.negative : borderSoft}`,
-    padding: getPadding3(controlSize),
+    padding: getPadding(controlSize),
     outline: "none",
-    color: theme.colors.onSurface,
-    backgroundColor: disabled ? surfaceMuted : theme.colors.surface,
-    boxShadow: error ? `0 0 0 3px ${(0, import_smartsell_sales_sdk7.withAlpha)(theme.colors.negative, 0.12)}` : `0 0 0 0 ${focusRing}`,
+    boxShadow: error ? `0 0 0 3px ${withAlpha(theme.colors.negative, 0.12)}` : `0 0 0 0 ${focusRing}`,
     transition: "border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease",
     resize: "vertical",
     ...style
   };
-  const textarea = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("textarea", { ...rest, id, disabled, rows, style: textareaStyle });
-  if (!label && !hint && !error) {
-    return textarea;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Field, { sdk, label, hint, error, htmlFor: id, children: textarea });
+  const textarea = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("textarea", { ...rest, id, disabled, rows, style: textareaStyle });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ControlFrame, { label, hint, error, htmlFor: id, required: rest.required, children: textarea });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Button,
   Card,
+  Checkbox,
   ComposableModal,
-  Field,
+  DatePicker,
   Input,
   Modal,
   Select,