smartsell-ui-kit 0.0.6 → 0.1.0

package/dist/index.js

@@ -1,10 +1,10 @@
 import {
-  Modal
-} from "./chunk-UIFTQDYM.js";
+  Modal,
+  withAlpha
+} from "./chunk-YWH2VIAD.js";
 
 // src/components/Button.tsx
 import { useState } from "react";
-import { withAlpha as withAlpha2 } from "smartsell-sales-sdk";
 
 // src/components/controlSize.ts
 var CONTROL_METRICS_BY_SIZE = {
@@ -65,13 +65,60 @@ var getButtonSizeStyles = (size) => {
 
 // src/theme.ts
 import { useMemo } from "react";
-import {
-  useSalesTheme,
-  withAlpha
-} from "smartsell-sales-sdk";
-function useUiKitTheme(sdk) {
-  const { theme } = useSalesTheme(sdk);
+import { useThemeValue } from "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 = useThemeValue();
   return useMemo(() => {
+    const theme = normalizeUiKitTheme(activeTheme);
     return {
       theme,
       borderSoft: withAlpha(theme.colors.onSurface, 0.1),
@@ -82,13 +129,12 @@ function useUiKitTheme(sdk) {
       focusRing: withAlpha(theme.colors.primary, 0.22),
       mutedText: withAlpha(theme.colors.onSurface, 0.72)
     };
-  }, [theme]);
+  }, [activeTheme]);
 }
 
 // src/components/Button.tsx
 import { jsxs } from "react/jsx-runtime";
 function Button({
-  sdk,
   variant = "solid",
   size = "md",
   fullWidth = false,
@@ -110,18 +156,18 @@ function Button({
   onTouchCancel,
   ...rest
 }) {
-  const { theme } = useUiKitTheme(sdk);
+  const { theme } = useUiKitTheme();
   const [isHovered, setIsHovered] = useState(false);
   const [isPressed, setIsPressed] = useState(false);
   const variantStyles = {
     solid: {
       backgroundColor: theme.colors.primary,
-      borderColor: withAlpha2(theme.colors.primary, 0.5),
+      borderColor: withAlpha(theme.colors.primary, 0.5),
       color: theme.colors.onPrimary
     },
     outline: {
       backgroundColor: "transparent",
-      borderColor: withAlpha2(theme.colors.text, 0.5),
+      borderColor: withAlpha(theme.colors.text, 0.5),
       color: theme.colors.onSurface
     },
     ghost: {
@@ -140,12 +186,12 @@ function Button({
     },
     outline: {
       transform: isPressed ? "translateY(1px) scale(0.985)" : isHovered ? "translateY(-1px)" : "translateY(0)",
-      backgroundColor: isPressed ? withAlpha2(interactiveColor, 0.14) : isHovered ? withAlpha2(interactiveColor, 0.08) : "transparent",
+      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 ? withAlpha2(interactiveColor, 0.12) : isHovered ? withAlpha2(interactiveColor, 0.06) : "transparent",
+      backgroundColor: isPressed ? withAlpha(interactiveColor, 0.12) : isHovered ? withAlpha(interactiveColor, 0.06) : "transparent",
       boxShadow: "none"
     }
   };
@@ -234,10 +280,8 @@ function Button({
 }
 
 // src/components/Card.tsx
-import { withAlpha as withAlpha3 } from "smartsell-sales-sdk";
 import { jsx, jsxs as jsxs2 } from "react/jsx-runtime";
 function Card({
-  sdk,
   children,
   eyebrow,
   title,
@@ -246,15 +290,15 @@ function Card({
   style,
   ...rest
 }) {
-  const { theme } = useUiKitTheme(sdk);
+  const { theme } = useUiKitTheme();
   return /* @__PURE__ */ jsxs2(
     "div",
     {
       ...rest,
       style: {
         borderRadius: 28,
-        border: `1px solid ${withAlpha3(theme.colors.text, 0.5)}`,
-        background: `${withAlpha3(theme.colors.background, 0.7)}`,
+        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
@@ -308,22 +352,265 @@ function Card({
   );
 }
 
+// src/components/Checkbox.tsx
+import { useEffect, useId, useRef, useState as useState2 } from "react";
+import { jsx as jsx2, jsxs as jsxs3 } from "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__ */ jsx2("svg", { width: size, height: size, viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx2(
+    "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__ */ jsx2("svg", { width: size, height: size, viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx2("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__ */ jsxs3(
+    "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__ */ jsx2(MixedIcon, { size: Math.max(10, size - 6), color: iconColor }) : null,
+        !indeterminate && checked ? /* @__PURE__ */ jsx2(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-${useId().replace(/:/g, "")}`;
+  const inputRef = useRef(null);
+  const [isFocused, setIsFocused] = useState2(false);
+  const [internalChecked, setInternalChecked] = useState2(Boolean(defaultChecked));
+  const isControlled = checked !== void 0;
+  const resolvedChecked = isControlled ? Boolean(checked) : internalChecked;
+  useEffect(() => {
+    if (!inputRef.current) {
+      return;
+    }
+    inputRef.current.indeterminate = indeterminate;
+  }, [indeterminate, resolvedChecked]);
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className,
+      style: {
+        width: "100%",
+        display: "flex",
+        flexDirection: "column",
+        gap: 6,
+        ...style
+      },
+      children: /* @__PURE__ */ jsxs3(
+        "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__ */ jsxs3(
+              "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__ */ jsx2(
+                    "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__ */ jsx2(
+                    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__ */ jsxs3(
+              "span",
+              {
+                style: {
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: 4,
+                  minWidth: 0
+                },
+                children: [
+                  label ? /* @__PURE__ */ jsxs3(
+                    "span",
+                    {
+                      style: {
+                        color: theme.colors.onSurface,
+                        fontSize: controlMetrics.fontSize,
+                        lineHeight: controlMetrics.lineHeight,
+                        fontWeight: 600
+                      },
+                      children: [
+                        label,
+                        required ? /* @__PURE__ */ jsx2("span", { style: { color: theme.colors.negative, marginLeft: 4 }, children: "*" }) : null
+                      ]
+                    }
+                  ) : null,
+                  hint ? /* @__PURE__ */ jsx2(
+                    "span",
+                    {
+                      style: {
+                        color: mutedText,
+                        fontSize: 13,
+                        lineHeight: 1.45
+                      },
+                      children: hint
+                    }
+                  ) : null,
+                  error ? /* @__PURE__ */ jsx2(
+                    "span",
+                    {
+                      style: {
+                        color: theme.colors.negative,
+                        fontSize: 13,
+                        lineHeight: 1.45,
+                        fontWeight: 600
+                      },
+                      children: error
+                    }
+                  ) : null
+                ]
+              }
+            ) : null
+          ]
+        }
+      )
+    }
+  );
+}
+
 // src/components/ComposableModal.tsx
 import { useMemo as useMemo2 } from "react";
-import { SlotRenderer } from "smartsell-sales-sdk";
-import { Fragment, jsx as jsx2, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx3, jsxs as jsxs4 } from "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,
+  renderSlot,
   payload,
   onConfirm,
   confirmLabel = "Confirm",
@@ -339,12 +626,11 @@ function ComposableModal({
   footerFallback,
   children
 }) {
-  const theme = useUiKitTheme(sdk);
+  const theme = useUiKitTheme();
   const slotIds = createModalSlotIds(slotBaseId);
   const context = useMemo2(
     () => ({
       title,
-      description,
       payload,
       close: onClose,
       confirm: onConfirm,
@@ -353,48 +639,44 @@ function ComposableModal({
       isOpen,
       isBusy
     }),
-    [cancelLabel, confirmLabel, description, isBusy, isOpen, onClose, onConfirm, payload, title]
+    [cancelLabel, confirmLabel, isBusy, isOpen, onClose, onConfirm, payload, title]
   );
-  const defaultFooter = hideDefaultFooter ? void 0 : footerFallback != null ? footerFallback : /* @__PURE__ */ jsxs3(Fragment, { children: [
-    /* @__PURE__ */ jsx2(Button, { sdk, variant: "outline", onClick: onClose, disabled: isBusy, children: cancelLabel }),
-    onConfirm ? /* @__PURE__ */ jsx2(Button, { sdk, onClick: onConfirm, disabled: isBusy, children: confirmLabel }) : null
-  ] });
-  const defaultHeader = headerFallback != null ? headerFallback : /* @__PURE__ */ jsxs3("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
-    /* @__PURE__ */ jsx2(
-      "h2",
-      {
-        style: {
-          margin: 0,
-          fontSize: 30,
-          fontWeight: 800,
-          lineHeight: 1.1
-        },
-        children: title
-      }
-    ),
-    description ? /* @__PURE__ */ jsx2(
-      "p",
-      {
-        style: {
-          margin: 0,
-          fontSize: 15,
-          lineHeight: 1.6,
-          opacity: 0.78
-        },
-        children: description
-      }
-    ) : null
+  const defaultFooter = hideDefaultFooter ? void 0 : footerFallback != null ? footerFallback : /* @__PURE__ */ jsxs4(Fragment, { children: [
+    /* @__PURE__ */ jsx3(Button, { variant: "outline", onClick: onClose, disabled: isBusy, children: cancelLabel }),
+    onConfirm ? /* @__PURE__ */ jsx3(Button, { onClick: onConfirm, disabled: isBusy, children: confirmLabel }) : null
   ] });
-  const headerContent = /* @__PURE__ */ jsx2(SlotRenderer, { id: slotIds.header, sdk, context, children: defaultHeader });
-  const bodyContent = /* @__PURE__ */ jsx2(SlotRenderer, { id: slotIds.body, sdk, context, children });
-  const footerContent = /* @__PURE__ */ jsx2(SlotRenderer, { id: slotIds.footer, sdk, context, children: defaultFooter });
-  return /* @__PURE__ */ jsx2(
+  const defaultHeader = headerFallback != null ? headerFallback : /* @__PURE__ */ jsx3(
+    "h2",
+    {
+      style: {
+        margin: 0,
+        fontSize: 30,
+        fontWeight: 800,
+        lineHeight: 1.1
+      },
+      children: title
+    }
+  );
+  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__ */ jsx3(
     Modal,
     {
       isOpen,
       onClose,
       title,
-      description,
+      isBusy,
       headerContent,
       footer: footerContent,
       theme,
@@ -408,10 +690,17 @@ function ComposableModal({
   );
 }
 
+// src/components/DatePicker.tsx
+import {
+  useEffect as useEffect2,
+  useMemo as useMemo3,
+  useRef as useRef2,
+  useState as useState4
+} from "react";
+
 // src/components/Input.tsx
-import { useState as useState2 } from "react";
-import { withAlpha as withAlpha4 } from "smartsell-sales-sdk";
-import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs4 } from "react/jsx-runtime";
+import { useState as useState3 } from "react";
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs5 } from "react/jsx-runtime";
 var PASSWORD_TOGGLE_METRICS_BY_SIZE = {
   sm: {
     buttonSize: 18,
@@ -434,7 +723,6 @@ var PASSWORD_TOGGLE_METRICS_BY_SIZE = {
 };
 var getPasswordToggleMetrics = (size) => PASSWORD_TOGGLE_METRICS_BY_SIZE[size];
 function ControlFrame({
-  sdk,
   label,
   hint,
   error,
@@ -444,10 +732,10 @@ function ControlFrame({
   children,
   style
 }) {
+  const { theme, mutedText } = useUiKitTheme();
   if (!label && !hint && !error) {
-    return /* @__PURE__ */ jsx3(Fragment2, { children });
+    return /* @__PURE__ */ jsx4(Fragment2, { children });
   }
-  const { theme, mutedText } = useUiKitTheme(sdk);
   const labelStyle = {
     color: theme.colors.onSurface,
     fontSize: 14,
@@ -462,13 +750,13 @@ function ControlFrame({
     ...style
   };
   if (!useLabelWrapper) {
-    return /* @__PURE__ */ jsxs4("div", { style: wrapperStyle, children: [
-      label || hint ? /* @__PURE__ */ jsxs4("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [
-        label ? /* @__PURE__ */ jsxs4("label", { htmlFor, style: labelStyle, children: [
+    return /* @__PURE__ */ jsxs5("div", { style: wrapperStyle, children: [
+      label || hint ? /* @__PURE__ */ jsxs5("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [
+        label ? /* @__PURE__ */ jsxs5("label", { htmlFor, style: labelStyle, children: [
           label,
-          required ? /* @__PURE__ */ jsx3("span", { style: { color: theme.colors.negative, marginLeft: 4 }, children: "*" }) : null
+          required ? /* @__PURE__ */ jsx4("span", { style: { color: theme.colors.negative, marginLeft: 4 }, children: "*" }) : null
         ] }) : null,
-        hint ? /* @__PURE__ */ jsx3(
+        hint ? /* @__PURE__ */ jsx4(
           "span",
           {
             style: {
@@ -481,7 +769,7 @@ function ControlFrame({
         ) : null
       ] }) : null,
       children,
-      error ? /* @__PURE__ */ jsx3(
+      error ? /* @__PURE__ */ jsx4(
         "span",
         {
           style: {
@@ -495,13 +783,13 @@ function ControlFrame({
       ) : null
     ] });
   }
-  return /* @__PURE__ */ jsxs4("label", { htmlFor, style: wrapperStyle, children: [
-    label || hint ? /* @__PURE__ */ jsxs4("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [
-      label ? /* @__PURE__ */ jsxs4("span", { style: labelStyle, children: [
+  return /* @__PURE__ */ jsxs5("label", { htmlFor, style: wrapperStyle, children: [
+    label || hint ? /* @__PURE__ */ jsxs5("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [
+      label ? /* @__PURE__ */ jsxs5("span", { style: labelStyle, children: [
         label,
-        required ? /* @__PURE__ */ jsx3("span", { style: { color: theme.colors.negative, marginLeft: 4 }, children: "*" }) : null
+        required ? /* @__PURE__ */ jsx4("span", { style: { color: theme.colors.negative, marginLeft: 4 }, children: "*" }) : null
       ] }) : null,
-      hint ? /* @__PURE__ */ jsx3(
+      hint ? /* @__PURE__ */ jsx4(
         "span",
         {
           style: {
@@ -514,7 +802,7 @@ function ControlFrame({
       ) : null
     ] }) : null,
     children,
-    error ? /* @__PURE__ */ jsx3(
+    error ? /* @__PURE__ */ jsx4(
       "span",
       {
         style: {
@@ -529,7 +817,6 @@ function ControlFrame({
   ] });
 }
 function Input({
-  sdk,
   label,
   hint,
   error,
@@ -541,10 +828,10 @@ function Input({
   type = "text",
   ...rest
 }) {
-  const { theme, borderSoft, focusRing, surfaceMuted } = useUiKitTheme(sdk);
+  const { theme, focusRing } = useUiKitTheme();
   const controlMetrics = getControlMetrics(controlSize);
   const passwordToggleMetrics = getPasswordToggleMetrics(controlSize);
-  const [isPasswordVisible, setIsPasswordVisible] = useState2(false);
+  const [isPasswordVisible, setIsPasswordVisible] = useState3(false);
   const isPasswordField = type === "password";
   const canTogglePasswordVisibility = isPasswordField && showPasswordToggle;
   const passwordToggleInset = Math.max(
@@ -558,7 +845,7 @@ function Input({
     boxSizing: "border-box",
     height: controlMetrics.height,
     borderRadius: 16,
-    border: `1px solid ${error ? theme.colors.negative : withAlpha4(theme.colors.textLight, 0.5)}`,
+    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",
@@ -567,12 +854,12 @@ function Input({
     outline: "none",
     fontSize: controlMetrics.fontSize,
     lineHeight: controlMetrics.lineHeight,
-    boxShadow: error ? `0 0 0 3px ${withAlpha4(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",
     ...style
   };
-  const input = canTogglePasswordVisibility ? /* @__PURE__ */ jsxs4("div", { style: { position: "relative", width: "100%" }, children: [
-    /* @__PURE__ */ jsx3(
+  const input = canTogglePasswordVisibility ? /* @__PURE__ */ jsxs5("div", { style: { position: "relative", width: "100%" }, children: [
+    /* @__PURE__ */ jsx4(
       "button",
       {
         type: "button",
@@ -605,7 +892,7 @@ function Input({
           cursor: disabled ? "not-allowed" : "pointer",
           opacity: disabled ? 0.5 : 1
         },
-        children: isPasswordVisible ? /* @__PURE__ */ jsxs4(
+        children: isPasswordVisible ? /* @__PURE__ */ jsxs5(
           "svg",
           {
             width: passwordToggleMetrics.iconSize,
@@ -614,7 +901,7 @@ function Input({
             fill: "none",
             "aria-hidden": "true",
             children: [
-              /* @__PURE__ */ jsx3(
+              /* @__PURE__ */ jsx4(
                 "path",
                 {
                   d: "M2.5 3.5L17.5 16.5",
@@ -623,7 +910,7 @@ function Input({
                   strokeLinecap: "round"
                 }
               ),
-              /* @__PURE__ */ jsx3(
+              /* @__PURE__ */ jsx4(
                 "path",
                 {
                   d: "M8.825 8.786a2 2 0 0 0 2.389 2.389",
@@ -633,7 +920,7 @@ function Input({
                   strokeLinejoin: "round"
                 }
               ),
-              /* @__PURE__ */ jsx3(
+              /* @__PURE__ */ jsx4(
                 "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",
@@ -643,7 +930,7 @@ function Input({
                   strokeLinejoin: "round"
                 }
               ),
-              /* @__PURE__ */ jsx3(
+              /* @__PURE__ */ jsx4(
                 "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",
@@ -655,7 +942,7 @@ function Input({
               )
             ]
           }
-        ) : /* @__PURE__ */ jsxs4(
+        ) : /* @__PURE__ */ jsxs5(
           "svg",
           {
             width: passwordToggleMetrics.iconSize,
@@ -664,7 +951,7 @@ function Input({
             fill: "none",
             "aria-hidden": "true",
             children: [
-              /* @__PURE__ */ jsx3(
+              /* @__PURE__ */ jsx4(
                 "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",
@@ -674,28 +961,605 @@ function Input({
                   strokeLinejoin: "round"
                 }
               ),
-              /* @__PURE__ */ jsx3("circle", { cx: "10", cy: "10", r: "2.25", stroke: "currentColor", strokeWidth: "1.8" })
+              /* @__PURE__ */ jsx4("circle", { cx: "10", cy: "10", r: "2.25", stroke: "currentColor", strokeWidth: "1.8" })
             ]
           }
         )
       }
     ),
-    /* @__PURE__ */ jsx3("input", { ...rest, id, type: resolvedType, disabled, style: inputStyle })
-  ] }) : /* @__PURE__ */ jsx3("input", { ...rest, id, type: resolvedType, disabled, style: inputStyle });
-  return /* @__PURE__ */ jsx3(ControlFrame, { sdk, label, hint, error, htmlFor: id, required: rest.required, children: input });
+    /* @__PURE__ */ jsx4("input", { ...rest, id, type: resolvedType, disabled, style: inputStyle })
+  ] }) : /* @__PURE__ */ jsx4("input", { ...rest, id, type: resolvedType, disabled, style: inputStyle });
+  return /* @__PURE__ */ jsx4(ControlFrame, { label, hint, error, htmlFor: id, required: rest.required, children: input });
+}
+
+// src/components/DatePicker.tsx
+import { jsx as jsx5, jsxs as jsxs6 } from "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__ */ jsxs6("svg", { width: size, height: size, viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx5("rect", { x: "3", y: "4.5", width: "14", height: "12.5", rx: "3", stroke: "currentColor", strokeWidth: "1.6" }),
+    /* @__PURE__ */ jsx5("path", { d: "M6.25 2.75V6", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" }),
+    /* @__PURE__ */ jsx5("path", { d: "M13.75 2.75V6", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" }),
+    /* @__PURE__ */ jsx5("path", { d: "M3 7.5H17", stroke: "currentColor", strokeWidth: "1.6" }),
+    /* @__PURE__ */ jsx5("circle", { cx: "10", cy: "11.5", r: "1.2", fill: "currentColor" })
+  ] });
+}
+function ClearIcon({ size }) {
+  return /* @__PURE__ */ jsxs6("svg", { width: size, height: size, viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx5("path", { d: "M5 5L15 15", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" }),
+    /* @__PURE__ */ jsx5("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 = useRef2();
+  const visibleInputRef = useRef2(null);
+  const nativeInputRef = useRef2(null);
+  const [internalError, setInternalError] = useState4();
+  const resolvedFormat = (format == null ? void 0 : format.trim()) ? format : DEFAULT_FORMAT_BY_MODE[mode];
+  const isControlled = value !== void 0;
+  const nativePickerType = mode === "datetime" ? "datetime-local" : "date";
+  if (!generatedIdRef.current) {
+    generatedIdRef.current = `ss-date-picker-${Math.random().toString(36).slice(2, 10)}`;
+  }
+  const resolvedId = id != null ? id : generatedIdRef.current;
+  const normalizedDefaultValue = useMemo3(() => {
+    const parsedDefaultValue = parseDateValue(defaultValue, mode, resolvedFormat);
+    return parsedDefaultValue ? toLocalInputValue(parsedDefaultValue, mode) : null;
+  }, [defaultValue, mode, resolvedFormat]);
+  const [uncontrolledValue, setUncontrolledValue] = useState4(normalizedDefaultValue);
+  const committedDate = useMemo3(() => {
+    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] = useState4(committedDisplayValue);
+  useEffect2(() => {
+    setDraftValue(committedDisplayValue);
+    setInternalError(void 0);
+  }, [committedDisplayValue]);
+  useEffect2(() => {
+    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 = useMemo3(() => {
+    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 = useMemo3(() => {
+    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__ */ jsxs6("div", { style: { position: "relative", width: "100%" }, children: [
+    /* @__PURE__ */ jsx5(
+      "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__ */ jsx5(
+      "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__ */ jsxs6(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          top: "50%",
+          right: accessoryMetrics.rightOffset,
+          transform: "translateY(-50%)",
+          display: "inline-flex",
+          alignItems: "center",
+          gap: accessoryMetrics.clusterGap
+        },
+        children: [
+          canClear ? /* @__PURE__ */ jsx5(
+            "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__ */ jsx5(ClearIcon, { size: accessoryMetrics.iconSize })
+            }
+          ) : null,
+          canOpenPicker ? /* @__PURE__ */ jsx5(
+            "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__ */ jsx5(CalendarIcon, { size: accessoryMetrics.iconSize })
+            }
+          ) : null
+        ]
+      }
+    ) : null
+  ] });
+  return /* @__PURE__ */ jsx5(
+    ControlFrame,
+    {
+      label,
+      hint,
+      error: resolvedError,
+      htmlFor: resolvedId,
+      required,
+      children: input
+    }
+  );
 }
 
 // src/components/Select.tsx
 import {
   Children,
   isValidElement,
-  useEffect,
-  useId,
-  useRef,
-  useState as useState3
+  useEffect as useEffect3,
+  useId as useId2,
+  useRef as useRef3,
+  useState as useState5
 } from "react";
-import { withAlpha as withAlpha5 } from "smartsell-sales-sdk";
-import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs7 } from "react/jsx-runtime";
 var MENU_OFFSET = 8;
 var MENU_MAX_HEIGHT = 280;
 var getOptionPadding = (size) => {
@@ -815,7 +1679,6 @@ function filterSelectGroups(groups, query) {
   })).filter((group) => group.options.length > 0);
 }
 function Select({
-  sdk,
   label,
   hint,
   error,
@@ -839,8 +1702,8 @@ function Select({
   ...rest
 }) {
   var _a, _b, _c, _d, _e, _f, _g, _h;
-  const { theme, borderSoft, mutedText, surfaceMuted, surfaceRaised } = useUiKitTheme(sdk);
-  const generatedId = useId().replace(/:/g, "");
+  const { theme, mutedText, surfaceRaised } = useUiKitTheme();
+  const generatedId = useId2().replace(/:/g, "");
   const resolvedId = id != null ? id : `ss-select-${generatedId}`;
   const isMultiSelect = Boolean(isMulti || multiple);
   const hasFilter = Boolean(isFilterable);
@@ -849,17 +1712,17 @@ function Select({
   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] = useState3(fallbackValues);
-  const [isOpen, setIsOpen] = useState3(false);
-  const [filterQuery, setFilterQuery] = useState3("");
-  const [menuPlacement, setMenuPlacement] = useState3("bottom");
-  const [isPlacementResolved, setIsPlacementResolved] = useState3(false);
-  const [highlightedValue, setHighlightedValue] = useState3((_d = (_c = fallbackValues[0]) != null ? _c : (_b = enabledOptions[0]) == null ? void 0 : _b.value) != null ? _d : "");
-  const shellRef = useRef(null);
-  const buttonRef = useRef(null);
-  const menuRef = useRef(null);
-  const searchInputRef = useRef(null);
-  const hiddenSelectRef = useRef(null);
+  const [uncontrolledValues, setUncontrolledValues] = useState5(fallbackValues);
+  const [isOpen, setIsOpen] = useState5(false);
+  const [filterQuery, setFilterQuery] = useState5("");
+  const [menuPlacement, setMenuPlacement] = useState5("bottom");
+  const [isPlacementResolved, setIsPlacementResolved] = useState5(false);
+  const [highlightedValue, setHighlightedValue] = useState5((_d = (_c = fallbackValues[0]) != null ? _c : (_b = enabledOptions[0]) == null ? void 0 : _b.value) != null ? _d : "");
+  const shellRef = useRef3(null);
+  const buttonRef = useRef3(null);
+  const menuRef = useRef3(null);
+  const searchInputRef = useRef3(null);
+  const hiddenSelectRef = useRef3(null);
   const selectedValues = isControlled ? normalizeSelectValues(value) : uncontrolledValues;
   const selectedValue = (_e = selectedValues[0]) != null ? _e : "";
   const selectedOptions = flatOptions.filter((option) => selectedValues.includes(option.value));
@@ -875,16 +1738,16 @@ function Select({
   const indicatorOffset = getSelectIndicatorOffset(controlSize);
   const controlMetrics = getControlMetrics(controlSize);
   const listboxId = `${resolvedId}-listbox`;
-  const scrollbarThumbColor = withAlpha5(theme.colors.onSurface, 0.22);
-  const scrollbarThumbHoverColor = withAlpha5(theme.colors.onSurface, 0.32);
+  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 = withAlpha5(theme.colors.primary, 1);
-  const optionSelectedBackground = withAlpha5(theme.colors.primary, 1);
-  const triggerShadow = error ? `0 0 0 3px ${withAlpha5(theme.colors.negative, 0.12)}` : "none";
+  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-"))
   );
-  useEffect(() => {
+  useEffect3(() => {
     var _a2, _b2, _c2, _d2;
     if (isControlled) {
       return;
@@ -901,7 +1764,7 @@ function Select({
     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]);
-  useEffect(() => {
+  useEffect3(() => {
     var _a2, _b2, _c2;
     if (!isOpen) {
       setMenuPlacement("bottom");
@@ -911,14 +1774,14 @@ function Select({
     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]);
-  useEffect(() => {
+  useEffect3(() => {
     var _a2;
     if (!isOpen || !hasFilter) {
       return;
     }
     (_a2 = searchInputRef.current) == null ? void 0 : _a2.focus();
   }, [hasFilter, isOpen]);
-  useEffect(() => {
+  useEffect3(() => {
     if (!isOpen) {
       return;
     }
@@ -943,13 +1806,13 @@ function Select({
       window.cancelAnimationFrame(frameId);
     };
   }, [isOpen, visibleOptions.length]);
-  useEffect(() => {
+  useEffect3(() => {
     if (isOpen) {
       return;
     }
     setFilterQuery("");
   }, [isOpen]);
-  useEffect(() => {
+  useEffect3(() => {
     if (!isOpen) {
       return;
     }
@@ -965,7 +1828,7 @@ function Select({
       document.removeEventListener("pointerdown", handlePointerDown);
     };
   }, [isOpen]);
-  useEffect(() => {
+  useEffect3(() => {
     var _a2;
     if (isControlled) {
       return;
@@ -1064,7 +1927,7 @@ function Select({
   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__ */ jsx4(
+  const bulkToggleControl = isMultiSelect ? /* @__PURE__ */ jsx6(
     "button",
     {
       type: "button",
@@ -1085,39 +1948,27 @@ function Select({
         height: 20,
         padding: 0,
         margin: 0,
-        borderRadius: 999,
-        border: `1.5px solid ${hasAllVisibleSelected || hasSomeVisibleSelected ? theme.colors.secondary : withAlpha5(theme.colors.onSurface, 0.22)}`,
-        backgroundColor: hasAllVisibleSelected || hasSomeVisibleSelected ? theme.colors.secondary : theme.colors.surface,
         display: "inline-flex",
         alignItems: "center",
         justifyContent: "center",
         flexShrink: 0,
+        border: "none",
+        background: "transparent",
         cursor: canToggleVisibleSelection ? "pointer" : "not-allowed",
         opacity: canToggleVisibleSelection ? 1 : 0.45
       },
-      children: hasAllVisibleSelected ? /* @__PURE__ */ jsx4(
-        "span",
-        {
-          "aria-hidden": "true",
-          style: {
-            width: 8,
-            height: 8,
-            borderRadius: 999,
-            backgroundColor: theme.colors.surface
-          }
-        }
-      ) : hasSomeVisibleSelected ? /* @__PURE__ */ jsx4(
-        "span",
+      children: /* @__PURE__ */ jsx6(
+        CheckboxIndicator,
         {
-          "aria-hidden": "true",
-          style: {
-            width: 8,
-            height: 2,
-            borderRadius: 999,
-            backgroundColor: theme.colors.surface
-          }
+          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
+      )
     }
   ) : null;
   const moveHighlight = (direction) => {
@@ -1238,8 +2089,8 @@ function Select({
       setIsOpen(false);
     }
   };
-  const select = /* @__PURE__ */ jsxs5("div", { ref: shellRef, style: { position: "relative", width: "100%" }, children: [
-    /* @__PURE__ */ jsxs5(
+  const select = /* @__PURE__ */ jsxs7("div", { ref: shellRef, style: { position: "relative", width: "100%" }, children: [
+    /* @__PURE__ */ jsxs7(
       "button",
       {
         ...buttonPassthroughProps,
@@ -1266,7 +2117,7 @@ function Select({
           boxSizing: "border-box",
           height: controlMetrics.height,
           borderRadius: 16,
-          border: `1px solid ${error ? theme.colors.negative : withAlpha5(theme.colors.textLight, 0.5)}`,
+          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",
@@ -1286,7 +2137,7 @@ function Select({
           ...style
         },
         children: [
-          /* @__PURE__ */ jsx4(
+          /* @__PURE__ */ jsx6(
             "span",
             {
               style: {
@@ -1300,7 +2151,7 @@ function Select({
               children: displayContent
             }
           ),
-          /* @__PURE__ */ jsx4(
+          /* @__PURE__ */ jsx6(
             "span",
             {
               "aria-hidden": "true",
@@ -1310,14 +2161,14 @@ function Select({
                 top: "50%",
                 transform: `translateY(-50%) rotate(${isOpen ? 180 : 0}deg)`,
                 transformOrigin: "center",
-                color: disabled ? withAlpha5(theme.colors.onSurface, 0.42) : mutedText,
+                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__ */ jsx4("svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx4(
+              children: /* @__PURE__ */ jsx6("svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx6(
                 "path",
                 {
                   d: "M5.75 7.75L10 12l4.25-4.25",
@@ -1332,7 +2183,7 @@ function Select({
         ]
       }
     ),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx6(
       "select",
       {
         ...rest,
@@ -1359,8 +2210,8 @@ function Select({
         children
       }
     ),
-    isOpen ? /* @__PURE__ */ jsxs5(Fragment3, { children: [
-      /* @__PURE__ */ jsx4("style", { children: `
+    isOpen ? /* @__PURE__ */ jsxs7(Fragment3, { children: [
+      /* @__PURE__ */ jsx6("style", { children: `
               #${listboxId} {
                 scrollbar-width: thin;
                 scrollbar-color: ${scrollbarThumbColor} transparent;
@@ -1386,7 +2237,7 @@ function Select({
                 background-clip: padding-box;
               }
             ` }),
-      /* @__PURE__ */ jsxs5(
+      /* @__PURE__ */ jsxs7(
         "div",
         {
           ref: menuRef,
@@ -1401,7 +2252,7 @@ function Select({
             overflow: "hidden",
             boxSizing: "border-box",
             borderRadius: 20,
-            border: `1px solid ${withAlpha5(theme.colors.textLight, 0.5)}`,
+            border: `1px solid ${withAlpha(theme.colors.textLight, 0.5)}`,
             backgroundColor: surfaceRaised,
             // boxShadow: `0 10px 24px ${withAlpha(theme.colors.onSurface, 0.08)}`,
             padding: 8,
@@ -1412,7 +2263,7 @@ function Select({
             gap: 4
           },
           children: [
-            hasFilter ? /* @__PURE__ */ jsxs5(
+            hasFilter ? /* @__PURE__ */ jsxs7(
               "div",
               {
                 style: {
@@ -1421,12 +2272,12 @@ function Select({
                   justifyContent: "flex-start",
                   gap: 8,
                   padding: "4px 4px 10px",
-                  borderBottom: `1px solid ${withAlpha5(theme.colors.onSurface, 0.08)}`,
+                  borderBottom: `1px solid ${withAlpha(theme.colors.onSurface, 0.08)}`,
                   flexShrink: 0
                 },
                 children: [
                   bulkToggleControl,
-                  /* @__PURE__ */ jsx4(
+                  /* @__PURE__ */ jsx6(
                     "input",
                     {
                       ref: searchInputRef,
@@ -1444,7 +2295,7 @@ function Select({
                       style: {
                         flex: "1 1 auto",
                         width: "100%",
-                        border: `1px solid ${withAlpha5(theme.colors.textLight, 0.5)}`,
+                        border: `1px solid ${withAlpha(theme.colors.textLight, 0.5)}`,
                         backgroundColor: theme.colors.surface,
                         padding: "8px 12px",
                         borderRadius: 12,
@@ -1459,7 +2310,7 @@ function Select({
                   )
                 ]
               }
-            ) : isMultiSelect ? /* @__PURE__ */ jsx4(
+            ) : isMultiSelect ? /* @__PURE__ */ jsx6(
               "div",
               {
                 style: {
@@ -1467,13 +2318,13 @@ function Select({
                   alignItems: "center",
                   justifyContent: "flex-start",
                   padding: "4px 4px 10px",
-                  borderBottom: `1px solid ${withAlpha5(theme.colors.onSurface, 0.08)}`,
+                  borderBottom: `1px solid ${withAlpha(theme.colors.onSurface, 0.08)}`,
                   flexShrink: 0
                 },
                 children: bulkToggleControl
               }
             ) : null,
-            /* @__PURE__ */ jsx4(
+            /* @__PURE__ */ jsx6(
               "div",
               {
                 id: listboxId,
@@ -1486,7 +2337,7 @@ function Select({
                   minHeight: 0,
                   flex: "1 1 auto"
                 },
-                children: visibleGroups.length === 0 ? /* @__PURE__ */ jsx4(
+                children: visibleGroups.length === 0 ? /* @__PURE__ */ jsx6(
                   "div",
                   {
                     style: {
@@ -1497,7 +2348,7 @@ function Select({
                     },
                     children: "No options found."
                   }
-                ) : visibleGroups.map((group) => /* @__PURE__ */ jsxs5(
+                ) : visibleGroups.map((group) => /* @__PURE__ */ jsxs7(
                   "div",
                   {
                     style: {
@@ -1507,7 +2358,7 @@ function Select({
                       marginTop: group.label ? 4 : 0
                     },
                     children: [
-                      group.label ? /* @__PURE__ */ jsx4(
+                      group.label ? /* @__PURE__ */ jsx6(
                         "span",
                         {
                           style: {
@@ -1525,7 +2376,7 @@ function Select({
                         const isSelected = selectedValues.includes(option.value);
                         const isHighlighted = option.value === highlightedValue;
                         const isActive = isSelected || isHighlighted;
-                        return /* @__PURE__ */ jsxs5(
+                        return /* @__PURE__ */ jsxs7(
                           "div",
                           {
                             role: "option",
@@ -1555,13 +2406,13 @@ function Select({
                               borderRadius: 14,
                               padding: getOptionPadding(controlSize),
                               cursor: option.disabled ? "not-allowed" : "pointer",
-                              color: option.disabled ? withAlpha5(theme.colors.onSurface, 0.38) : isActive ? theme.colors.onPrimary : theme.colors.onSurface,
+                              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__ */ jsxs5(
+                              /* @__PURE__ */ jsxs7(
                                 "span",
                                 {
                                   style: {
@@ -1572,23 +2423,19 @@ function Select({
                                     minWidth: 0
                                   },
                                   children: [
-                                    isMultiSelect ? /* @__PURE__ */ jsx4(
-                                      "span",
+                                    isMultiSelect ? /* @__PURE__ */ jsx6(
+                                      CheckboxIndicator,
                                       {
-                                        "aria-hidden": "true",
-                                        style: {
-                                          width: 10,
-                                          height: 10,
-                                          borderRadius: 999,
-                                          flexShrink: 0,
-                                          border: `1.5px solid ${isSelected ? theme.colors.secondary : "currentColor"}`,
-                                          backgroundColor: isSelected ? theme.colors.secondary : "transparent",
-                                          opacity: option.disabled ? 0.45 : 1,
-                                          transition: "background-color 140ms ease, border-color 140ms ease, opacity 140ms ease"
-                                        }
+                                        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__ */ jsx4(
+                                    /* @__PURE__ */ jsx6(
                                       "span",
                                       {
                                         style: {
@@ -1605,7 +2452,7 @@ function Select({
                                   ]
                                 }
                               ),
-                              isSelected ? /* @__PURE__ */ jsx4(
+                              !isMultiSelect && isSelected ? /* @__PURE__ */ jsx6(
                                 "span",
                                 {
                                   "aria-hidden": "true",
@@ -1616,7 +2463,7 @@ function Select({
                                     color: theme.colors.primary,
                                     flexShrink: 0
                                   },
-                                  children: /* @__PURE__ */ jsx4("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx4(
+                                  children: /* @__PURE__ */ jsx6("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx6(
                                     "path",
                                     {
                                       d: "M5.75 10.25L8.5 13l5.75-6",
@@ -1644,10 +2491,9 @@ function Select({
       )
     ] }) : null
   ] });
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx6(
     ControlFrame,
     {
-      sdk,
       label,
       hint,
       error,
@@ -1660,15 +2506,13 @@ function Select({
 }
 
 // src/components/Textarea.tsx
-import { withAlpha as withAlpha6 } from "smartsell-sales-sdk";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "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,
@@ -1679,9 +2523,9 @@ 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 : withAlpha6(theme.colors.textLight, 0.5)}`,
+    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",
@@ -1691,18 +2535,20 @@ function Textarea({
     borderRadius: 16,
     padding: getPadding(controlSize),
     outline: "none",
-    boxShadow: error ? `0 0 0 3px ${withAlpha6(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__ */ jsx5("textarea", { ...rest, id, disabled, rows, style: textareaStyle });
-  return /* @__PURE__ */ jsx5(ControlFrame, { sdk, label, hint, error, htmlFor: id, required: rest.required, children: textarea });
+  const textarea = /* @__PURE__ */ jsx7("textarea", { ...rest, id, disabled, rows, style: textareaStyle });
+  return /* @__PURE__ */ jsx7(ControlFrame, { label, hint, error, htmlFor: id, required: rest.required, children: textarea });
 }
 export {
   Button,
   Card,
+  Checkbox,
   ComposableModal,
+  DatePicker,
   Input,
   Modal,
   Select,