@mastra/playground-ui 24.1.0-alpha.0 → 24.1.0-alpha.2

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # @mastra/playground-ui
 
+## 24.1.0-alpha.2
+
+### Patch Changes
+
+- Updated dependencies [[`e109607`](https://github.com/mastra-ai/mastra/commit/e10960749251e34d46b480a20648c490fd30381b)]:
+  - @mastra/core@1.31.0-alpha.1
+  - @mastra/client-js@1.15.3-alpha.1
+  - @mastra/react@0.2.33-alpha.1
+
+## 24.1.0-alpha.1
+
+### Minor Changes
+
+- Refactored Button component to use a single `cva` (class-variance-authority) variant config instead of nested manual maps. Consolidated `IconButton` into `Button` via `size="icon-sm|icon-md|icon-lg"` and removed the `IconButton` export. Replaced `variant="light"` and `variant="inputLike"` with `variant="default"` (no behavior change for default styling). Added `cta` and `outline` variants and unified active/hover styles between text- and icon-mode buttons. ([#15985](https://github.com/mastra-ai/mastra/pull/15985))
+
+  **Why:** A single source of truth for variants means consistent visuals, fewer drift bugs, simpler maintenance, and a more predictable surface for AI agents — single-variant cva is the dominant shadcn pattern across DS components in this repo (`Card`, `Input`, `Label`, `Textarea`, `StatusBadge`).
+
+  **Migration:**
+
+  ```tsx
+  // Before
+  import { IconButton } from '@mastra/playground-ui';
+  <IconButton><Settings /></IconButton>
+  <Button variant="light">…</Button>
+  <Combobox variant="inputLike" />
+
+  // After
+  import { Button } from '@mastra/playground-ui';
+  <Button size="icon-md"><Settings /></Button>
+  <Button variant="default">…</Button>
+  <Combobox variant="default" />
+  ```
+
+### Patch Changes
+
+- Aligned AlertDialog visual styling with Dialog component for design system consistency. AlertDialog now uses the same surface tokens, border radius, shadow, animation curves, and typography scale as Dialog. The accessibility primitive remains separate (preserves `role="alertdialog"` and explicit Action/Cancel semantics) — only the visual shell was synced. Also added `AlertDialog.Body` for parity with Dialog. ([#15988](https://github.com/mastra-ai/mastra/pull/15988))
+
+- Updated dependencies [[`1723e09`](https://github.com/mastra-ai/mastra/commit/1723e099829892419ddbfe49287acfeac2522724), [`629f9e9`](https://github.com/mastra-ai/mastra/commit/629f9e9a7e56aa8f129515a3923c5813298790c7), [`25168fb`](https://github.com/mastra-ai/mastra/commit/25168fb9c1de9db7f8171df4f58ceb842c53aa29), [`ab34b5a`](https://github.com/mastra-ai/mastra/commit/ab34b5a2191b8e4353df1dbf7b9155e7d6628d79), [`5fb6c2a`](https://github.com/mastra-ai/mastra/commit/5fb6c2a95c1843cc231704b91354311fc1f34a71), [`394f0cf`](https://github.com/mastra-ai/mastra/commit/394f0cfc31e6b4d801219fdef2e9cc69e5bc8682), [`3d7f709`](https://github.com/mastra-ai/mastra/commit/3d7f709b615e588050bb6283c4ee5cfe2978cbde), [`48a42f1`](https://github.com/mastra-ai/mastra/commit/48a42f114a4006a95e0b7a1b5ad1a24815a175c2), [`2c83efc`](https://github.com/mastra-ai/mastra/commit/2c83efc4482b3efe50830e3b8b4ba9a8d219edff), [`282a10c`](https://github.com/mastra-ai/mastra/commit/282a10c9446e9922afe80e10e3770481c8ac8a28)]:
+  - @mastra/core@1.31.0-alpha.0
+  - @mastra/client-js@1.15.3-alpha.0
+  - @mastra/react@0.2.33-alpha.0
+
 ## 24.1.0-alpha.0
 
 ### Minor Changes

package/dist/index.cjs.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 require('./index.css');const jsxRuntime = require('react/jsx-runtime');
 const lucideReact = require('lucide-react');
 const React = require('react');
-const tokens = require('./tokens.cjs.js');
 const TooltipPrimitive = require('@radix-ui/react-tooltip');
+const tokens = require('./tokens.cjs.js');
 const langJson = require('@codemirror/lang-json');
 const langMarkdown = require('@codemirror/lang-markdown');
 const language = require('@codemirror/language');
@@ -88,22 +88,49 @@ const SwitchPrimitives__namespace = /*#__PURE__*/_interopNamespaceDefault(Switch
 const HoverCard__namespace = /*#__PURE__*/_interopNamespaceDefault(HoverCard);
 const RadixTabs__namespace = /*#__PURE__*/_interopNamespaceDefault(RadixTabs);
 
-const formElementSizes = {
-  sm: "h-form-sm",
-  md: "h-form-md",
-  default: "h-form-default",
-  lg: "h-form-lg"
-};
-const formElementFocus = "focus:outline-hidden focus:ring-1 focus:ring-accent1 focus:shadow-focus-ring transition-shadow duration-normal";
-const formElementFocusWithin = "focus-within:outline-hidden focus-within:ring-1 focus-within:ring-accent1 focus-within:shadow-focus-ring transition-shadow duration-normal";
-const formElementRadius = "rounded-md";
-const sharedFormElementStyle = "bg-surface2 border-2 border-border1 text-neutral5 hover:text-neutral6 hover:border-border2 rounded-lg";
-const sharedFormElementFocusStyle = "outline-hidden focus-visible:outline-hidden focus-visible:border-accent1 focus-visible:ring-1 focus-visible:ring-accent1/40";
-const sharedFormElementDisabledStyle = "disabled:opacity-50 disabled:cursor-not-allowed";
-const formElementTransition = "transition-all duration-normal ease-out-custom";
-
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
+const falsyToString = (value)=>typeof value === "boolean" ? `${value}` : value === 0 ? "0" : value;
+const cx = clsx;
+const cva = (base, config)=>(props)=>{
+        var _config_compoundVariants;
+        if ((config === null || config === void 0 ? void 0 : config.variants) == null) return cx(base, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
+        const { variants, defaultVariants } = config;
+        const getVariantClassNames = Object.keys(variants).map((variant)=>{
+            const variantProp = props === null || props === void 0 ? void 0 : props[variant];
+            const defaultVariantProp = defaultVariants === null || defaultVariants === void 0 ? void 0 : defaultVariants[variant];
+            if (variantProp === null) return null;
+            const variantKey = falsyToString(variantProp) || falsyToString(defaultVariantProp);
+            return variants[variant][variantKey];
+        });
+        const propsWithoutUndefined = props && Object.entries(props).reduce((acc, param)=>{
+            let [key, value] = param;
+            if (value === undefined) {
+                return acc;
+            }
+            acc[key] = value;
+            return acc;
+        }, {});
+        const getCompoundVariantClassNames = config === null || config === void 0 ? void 0 : (_config_compoundVariants = config.compoundVariants) === null || _config_compoundVariants === void 0 ? void 0 : _config_compoundVariants.reduce((acc, param)=>{
+            let { class: cvClass, className: cvClassName, ...compoundVariantOptions } = param;
+            return Object.entries(compoundVariantOptions).every((param)=>{
+                let [key, value] = param;
+                return Array.isArray(value) ? value.includes({
+                    ...defaultVariants,
+                    ...propsWithoutUndefined
+                }[key]) : ({
+                    ...defaultVariants,
+                    ...propsWithoutUndefined
+                })[key] === value;
+            }) ? [
+                ...acc,
+                cvClass,
+                cvClassName
+            ] : acc;
+        }, []);
+        return cx(base, getVariantClassNames, getCompoundVariantClassNames, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
+    };
+
 /**
  * Concatenates two arrays faster than the array spread operator.
  */
@@ -3388,41 +3415,95 @@ function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 
-const sizeClasses$6 = {
-  sm: `${formElementSizes.sm} text-ui-sm px-[.75em]`,
-  md: `${formElementSizes.md} text-ui-md px-[.75em]`,
-  default: `${formElementSizes.default} text-ui-md px-[.85em] `,
-  lg: `${formElementSizes.lg} text-ui-lg px-[1em] `
+const TooltipProvider = TooltipPrimitive__namespace.Provider;
+const Tooltip = TooltipPrimitive__namespace.Root;
+const TooltipTrigger = TooltipPrimitive__namespace.Trigger;
+const TooltipContent = React__namespace.forwardRef(({ className, sideOffset = 4, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+  TooltipPrimitive__namespace.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn(
+      "z-50 overflow-hidden rounded-md bg-surface3 px-3 py-1.5 text-xs text-neutral4 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Arrow, { className: "fill-surface3" })
+    ]
+  }
+) }));
+TooltipContent.displayName = TooltipPrimitive__namespace.Content.displayName;
+
+const sizes = {
+  sm: "[&>svg]:h-icon-sm [&>svg]:w-icon-sm",
+  default: "[&>svg]:h-icon-default [&>svg]:w-icon-default",
+  lg: "[&>svg]:h-icon-lg [&>svg]:w-icon-lg"
 };
-const variantClasses$2 = {
-  default: "bg-surface3 border-2 border-border1 hover:text-neutral6 hover:bg-surface4 active:bg-surface5 text-neutral5",
-  primary: "bg-surface4 border-2 border-border2 hover:text-neutral6 hover:bg-surface5 active:bg-surface6 text-neutral6",
-  cta: "bg-accent1/50 hover:bg-accent1/80 text-neutral5 font-semibold",
-  ghost: "bg-transparent border-2 border-transparent hover:text-neutral6 hover:bg-surface4 active:bg-surface5 text-neutral4",
-  inputLike: sharedFormElementStyle,
-  light: "",
-  outline: "",
-  link: "inline-flex justify-start rounded-none h-auto px-0 bg-transparent text-neutral3 hover:text-neutral4 gap-1 [&>svg]:mx-0 w-auto [&>svg]:opacity-70"
+const Icon = ({ children, className, size = "default", ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("block", sizes[size], className), ...props, children });
+};
+
+const formElementSizes = {
+  sm: "h-form-sm",
+  md: "h-form-md",
+  default: "h-form-default",
+  lg: "h-form-lg"
 };
-const sharedStyles = cn(
-  "flex items-center justify-center gap-[.75em] leading-0 transition-colors duration-200 ease-out-custom rounded-lg",
+const formElementFocus = "focus:outline-hidden focus:ring-1 focus:ring-accent1 focus:shadow-focus-ring transition-shadow duration-normal";
+const formElementFocusWithin = "focus-within:outline-hidden focus-within:ring-1 focus-within:ring-accent1 focus-within:shadow-focus-ring transition-shadow duration-normal";
+const formElementRadius = "rounded-md";
+const sharedFormElementStyle = "bg-surface2 border-2 border-border1 text-neutral5 hover:text-neutral6 hover:border-border2 rounded-lg";
+const sharedFormElementFocusStyle = "outline-hidden focus-visible:outline-hidden focus-visible:border-accent1 focus-visible:ring-1 focus-visible:ring-accent1/40";
+const sharedFormElementDisabledStyle = "disabled:opacity-50 disabled:cursor-not-allowed";
+const formElementTransition = "transition-all duration-normal ease-out-custom";
+
+const TEXT_MODE_ADORNMENTS = cn(
+  "gap-[.75em] rounded-lg",
   "[&>svg]:w-[1.1em] [&>svg]:h-[1.1em] [&>svg]:mx-[-.3em]",
-  "[&>svg]:opacity-50 [&:hover>svg]:opacity-100",
-  sharedFormElementDisabledStyle,
-  sharedFormElementFocusStyle
+  "[&>svg]:opacity-50 [&:hover>svg]:opacity-100"
 );
-const variantMap = {
-  light: "default",
-  outline: "default"
+const buttonVariants = cva(
+  cn(
+    "inline-flex items-center justify-center leading-0",
+    "transition-all duration-normal ease-out-custom",
+    sharedFormElementDisabledStyle,
+    sharedFormElementFocusStyle
+  ),
+  {
+    variants: {
+      variant: {
+        default: "bg-surface3 border-2 border-border1 hover:bg-surface5 hover:text-neutral6 active:bg-surface6 text-neutral6",
+        primary: "bg-surface4 border-2 border-border2 hover:bg-surface5 hover:text-neutral6 active:bg-surface6 text-neutral6",
+        cta: "bg-accent1 border-2 border-transparent hover:bg-accent1/90 hover:shadow-glow-accent1 disabled:hover:shadow-none text-surface1 font-medium",
+        ghost: "bg-transparent border-2 border-transparent hover:bg-surface4 hover:text-neutral6 active:bg-surface5 text-neutral4",
+        outline: "bg-transparent border-2 border-border1 hover:bg-surface3 hover:text-neutral6 active:bg-surface4 text-neutral5",
+        link: "inline-flex justify-start rounded-none h-auto px-0 bg-transparent text-neutral3 hover:text-neutral4 gap-1 [&>svg]:mx-0 w-auto [&>svg]:opacity-70"
+      },
+      size: {
+        sm: cn(`${formElementSizes.sm} text-ui-sm px-[.75em]`, TEXT_MODE_ADORNMENTS),
+        md: cn(`${formElementSizes.md} text-ui-md px-[.75em]`, TEXT_MODE_ADORNMENTS),
+        default: cn(`${formElementSizes.default} text-ui-md px-[.85em]`, TEXT_MODE_ADORNMENTS),
+        lg: cn(`${formElementSizes.lg} text-ui-lg px-[1em]`, TEXT_MODE_ADORNMENTS),
+        // Icon sizes: square dimensions, smaller radius. Active state inherits from variant
+        // (e.g. `active:bg-surface5`) — same press feedback as text-mode for consistency.
+        "icon-sm": `${formElementSizes.sm} w-form-sm rounded-md`,
+        "icon-md": `${formElementSizes.md} w-form-md rounded-md`,
+        "icon-lg": `${formElementSizes.lg} w-form-lg rounded-md`
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+const iconChildSizeMap = {
+  "icon-sm": "sm",
+  "icon-md": "default",
+  "icon-lg": "lg"
 };
-function resolveVariant(variant) {
-  return variantMap[variant] ?? variant;
-}
-function buttonVariants(options) {
-  const variant = resolveVariant(options?.variant || "default");
-  const size = options?.size || "default";
-  return cn(sharedStyles, sizeClasses$6[size], variantClasses$2[variant], options?.iconOnly && "[&>svg]:opacity-75");
-}
 function flattenChildren(children) {
   const result = [];
   React.Children.forEach(children, (child) => {
@@ -3438,45 +3519,39 @@ function isIconOnly(children) {
   const flat = flattenChildren(children);
   return flat.length > 0 && flat.every((child) => React.isValidElement(child));
 }
+function isIconButtonSize(size) {
+  return typeof size === "string" && size.startsWith("icon-");
+}
 const Button = React.forwardRef(
-  ({ className, as, size = "default", variant = "default", disabled, children, ...props }, ref) => {
+  ({ className, as, size, variant = "default", disabled, children, tooltip, "aria-label": ariaLabelProp, ...props }, ref) => {
     const Component = as || "button";
-    const iconOnly = isIconOnly(children);
-    return /* @__PURE__ */ jsxRuntime.jsx(
+    const iconMode = isIconButtonSize(size);
+    const resolvedSize = size ?? "default";
+    const isLabelless = !iconMode && isIconOnly(children);
+    const ariaLabel = ariaLabelProp ?? ((iconMode || isLabelless) && typeof tooltip === "string" ? tooltip : void 0);
+    const content = iconMode ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: iconChildSizeMap[size], children }) : children;
+    const button = /* @__PURE__ */ jsxRuntime.jsx(
       Component,
       {
         ref,
         disabled,
-        className: cn(buttonVariants({ variant, size, iconOnly }), className),
+        "aria-label": ariaLabel,
+        className: cn(buttonVariants({ variant, size: resolvedSize }), isLabelless && "[&>svg]:opacity-75", className),
         ...props,
-        children
+        children: content
       }
     );
+    if (tooltip) {
+      return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: button }),
+        /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: tooltip })
+      ] });
+    }
+    return button;
   }
 );
 Button.displayName = "Button";
 
-const TooltipProvider = TooltipPrimitive__namespace.Provider;
-const Tooltip = TooltipPrimitive__namespace.Root;
-const TooltipTrigger = TooltipPrimitive__namespace.Trigger;
-const TooltipContent = React__namespace.forwardRef(({ className, sideOffset = 4, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-  TooltipPrimitive__namespace.Content,
-  {
-    ref,
-    sideOffset,
-    className: cn(
-      "z-50 overflow-hidden rounded-md bg-surface3 px-3 py-1.5 text-xs text-neutral4 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
-    ),
-    ...props,
-    children: [
-      children,
-      /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Arrow, { className: "fill-surface3" })
-    ]
-  }
-) }));
-TooltipContent.displayName = TooltipPrimitive__namespace.Content.displayName;
-
 const ButtonWithTooltip = React.forwardRef(
   ({ tooltipContent, ...buttonProps }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
@@ -3487,15 +3562,6 @@ const ButtonWithTooltip = React.forwardRef(
 );
 ButtonWithTooltip.displayName = "ButtonWithTooltip";
 
-const sizes = {
-  sm: "[&>svg]:h-icon-sm [&>svg]:w-icon-sm",
-  default: "[&>svg]:h-icon-default [&>svg]:w-icon-default",
-  lg: "[&>svg]:h-icon-lg [&>svg]:w-icon-lg"
-};
-const Icon = ({ children, className, size = "default", ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("block", sizes[size], className), ...props, children });
-};
-
 const transitions = {
   // For color changes (background, text, border)
   colors: "transition-colors duration-normal ease-out-custom",
@@ -3604,7 +3670,7 @@ const Txt = ({ as: Root = "p", className, variant = "ui-md", font, ...props }) =
   return /* @__PURE__ */ jsxRuntime.jsx(Root, { className: cn(variants[variant], font && fonts[font], className), ...props });
 };
 
-const sizeClasses$5 = {
+const sizeClasses$4 = {
   sm: "h-avatar-sm w-avatar-sm",
   md: "h-avatar-md w-avatar-md",
   lg: "h-avatar-lg w-avatar-lg"
@@ -3614,7 +3680,7 @@ const Avatar = ({ src, name, size = "sm", interactive = false }) => {
     "div",
     {
       className: cn(
-        sizeClasses$5[size],
+        sizeClasses$4[size],
         "border border-border1 bg-surface3 shrink-0 overflow-hidden rounded-full flex items-center justify-center",
         transitions.all,
         interactive && "cursor-pointer hover:scale-105 hover:border-neutral2 hover:shadow-sm"
@@ -3624,7 +3690,7 @@ const Avatar = ({ src, name, size = "sm", interactive = false }) => {
   );
 };
 
-const variantClasses$1 = {
+const variantClasses = {
   default: "text-neutral3 bg-surface4",
   success: "text-accent1 bg-accent1Dark",
   error: "text-accent2 bg-accent2Dark",
@@ -3646,7 +3712,7 @@ const Badge = ({ icon, variant = "default", className, children, ...props }) =>
         "font-mono text-ui-sm gap-1 h-badge-default inline-flex items-center rounded-full border border-border1 shrink-0",
         transitions.colors,
         icon ? "pl-2 pr-2.5" : "px-2.5",
-        variant === "default" && icon ? "bg-surface4 text-neutral5" : variantClasses$1[variant],
+        variant === "default" && icon ? "bg-surface4 text-neutral5" : variantClasses[variant],
         className
       ),
       ...props,
@@ -5673,7 +5739,7 @@ const LogoWithoutText = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns
 ) });
 
 const PATH_D = "M4.49805 11.6934C6.98237 11.6934 8.99609 13.7081 8.99609 16.1924C8.9959 18.6765 6.98225 20.6904 4.49805 20.6904C2.01394 20.6903 0.000196352 18.6765 0 16.1924C0 13.7081 2.01382 11.6935 4.49805 11.6934ZM10.3867 0C12.8709 0 14.8846 2.01388 14.8848 4.49805C14.8848 4.8377 14.847 5.16846 14.7755 5.48643C14.4618 6.88139 14.1953 8.4633 14.9928 9.65L16.2575 11.5319C16.3363 11.6491 16.4727 11.7115 16.6137 11.703C16.7369 11.6957 16.8525 11.6343 16.9214 11.5318L18.1876 9.64717C18.9772 8.47198 18.7236 6.90783 18.4205 5.52484C18.3523 5.21392 18.3164 4.89094 18.3164 4.55957C18.3167 2.07546 20.3313 0.0615234 22.8154 0.0615234C25.2994 0.0617476 27.3132 2.0756 27.3135 4.55957C27.3135 4.93883 27.2665 5.30712 27.178 5.65896C26.8547 6.94441 26.5817 8.37932 27.2446 9.52714L28.459 11.6301C28.4819 11.6697 28.5245 11.6934 28.5703 11.6934C31.0545 11.6935 33.0684 13.7081 33.0684 16.1924C33.0682 18.6765 31.0544 20.6903 28.5703 20.6904C26.0861 20.6904 24.0725 18.6765 24.0723 16.1924C24.0723 15.8049 24.1212 15.4288 24.2133 15.0701C24.5458 13.7746 24.8298 12.3251 24.1609 11.1668L23.0044 9.16384C22.9656 9.09659 22.8931 9.05859 22.8154 9.05859C22.7983 9.05859 22.7824 9.06614 22.7728 9.08033L21.4896 10.9895C20.686 12.1851 20.9622 13.781 21.284 15.1851C21.3582 15.5089 21.3975 15.8461 21.3975 16.1924C21.3973 18.6764 19.3834 20.6902 16.8994 20.6904C14.4152 20.6904 12.4006 18.6765 12.4004 16.1924C12.4004 15.932 12.4226 15.6768 12.4651 15.4286C12.6859 14.14 12.8459 12.7122 12.1167 11.6271L11.2419 10.3253C10.6829 9.49347 9.71913 9.05932 8.78286 8.70188C7.0906 8.05584 5.88867 6.41734 5.88867 4.49805C5.88886 2.0139 7.90254 3.29835e-05 10.3867 0Z";
-const sizeClasses$4 = {
+const sizeClasses$3 = {
   sm: "w-6",
   md: "w-10"
 };
@@ -5702,7 +5768,7 @@ function Logo({ className, size = "md", animateOnHover = false, "aria-label": ar
       onAnimationEnd: handleAnimationEnd,
       className: cn(
         "logo inline-block text-neutral6",
-        sizeClasses$4[size],
+        sizeClasses$3[size],
         animateOnHover && playing && "logo-animate-on-hover",
         className
       ),
@@ -5920,47 +5986,6 @@ function useTableKeyboardNavigation({
   };
 }
 
-const falsyToString = (value)=>typeof value === "boolean" ? `${value}` : value === 0 ? "0" : value;
-const cx = clsx;
-const cva = (base, config)=>(props)=>{
-        var _config_compoundVariants;
-        if ((config === null || config === void 0 ? void 0 : config.variants) == null) return cx(base, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
-        const { variants, defaultVariants } = config;
-        const getVariantClassNames = Object.keys(variants).map((variant)=>{
-            const variantProp = props === null || props === void 0 ? void 0 : props[variant];
-            const defaultVariantProp = defaultVariants === null || defaultVariants === void 0 ? void 0 : defaultVariants[variant];
-            if (variantProp === null) return null;
-            const variantKey = falsyToString(variantProp) || falsyToString(defaultVariantProp);
-            return variants[variant][variantKey];
-        });
-        const propsWithoutUndefined = props && Object.entries(props).reduce((acc, param)=>{
-            let [key, value] = param;
-            if (value === undefined) {
-                return acc;
-            }
-            acc[key] = value;
-            return acc;
-        }, {});
-        const getCompoundVariantClassNames = config === null || config === void 0 ? void 0 : (_config_compoundVariants = config.compoundVariants) === null || _config_compoundVariants === void 0 ? void 0 : _config_compoundVariants.reduce((acc, param)=>{
-            let { class: cvClass, className: cvClassName, ...compoundVariantOptions } = param;
-            return Object.entries(compoundVariantOptions).every((param)=>{
-                let [key, value] = param;
-                return Array.isArray(value) ? value.includes({
-                    ...defaultVariants,
-                    ...propsWithoutUndefined
-                }[key]) : ({
-                    ...defaultVariants,
-                    ...propsWithoutUndefined
-                })[key] === value;
-            }) ? [
-                ...acc,
-                cvClass,
-                cvClassName
-            ] : acc;
-        }, []);
-        return cx(base, getVariantClassNames, getCompoundVariantClassNames, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
-    };
-
 const textareaVariants = cva(
   cn(
     // Base styles with enhanced transitions
@@ -6025,14 +6050,9 @@ function AlertDialog({
 const AlertDialogOverlay = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   AlertDialogPrimitive__namespace.Overlay,
   {
-    className: cn(
-      "fixed inset-0 z-50 bg-overlay backdrop-blur-sm",
-      "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:duration-200",
-      "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:duration-150",
-      className
-    ),
-    ...props,
-    ref
+    ref,
+    className: cn("dialog-overlay-anim fixed inset-0 z-50 bg-overlay backdrop-blur-xs", className),
+    ...props
   }
 ));
 AlertDialogOverlay.displayName = AlertDialogPrimitive__namespace.Overlay.displayName;
@@ -6043,9 +6063,10 @@ const AlertDialogContent = React__namespace.forwardRef(({ className, ...props },
     {
       ref,
       className: cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border1 bg-surface3 p-6 shadow-dialog rounded-md",
-        "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] data-[state=open]:duration-200",
-        "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=closed]:duration-150",
+        "dialog-content-anim",
+        "fixed left-[50%] top-[50%] z-50 grid translate-x-[-50%] translate-y-[-50%]",
+        "w-full max-w-[calc(100%-2rem)] sm:max-w-lg",
+        "rounded-xl border border-border1/40 bg-surface2/96 backdrop-blur-md shadow-dialog",
         className
       ),
       ...props
@@ -6053,13 +6074,15 @@ const AlertDialogContent = React__namespace.forwardRef(({ className, ...props },
   )
 ] }));
 AlertDialogContent.displayName = AlertDialogPrimitive__namespace.Content.displayName;
-const AlertDialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col space-y-2 text-center sm:text-left", className), ...props });
+const AlertDialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col gap-0.5 px-4 py-3 text-left", className), ...props });
 AlertDialogHeader.displayName = "AlertDialogHeader";
-const AlertDialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className), ...props });
+const AlertDialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col-reverse gap-1.5 px-4 py-2.5 sm:flex-row sm:justify-end", className), ...props });
 AlertDialogFooter.displayName = "AlertDialogFooter";
-const AlertDialogTitle = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(AlertDialogPrimitive__namespace.Title, { ref, className: cn("text-lg font-semibold", className), ...props }));
+const AlertDialogBody = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("overflow-y-auto px-4 py-3.5 max-h-[50vh]", className), ...props });
+AlertDialogBody.displayName = "AlertDialogBody";
+const AlertDialogTitle = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(AlertDialogPrimitive__namespace.Title, { ref, className: cn("text-ui-md font-medium", className), ...props }));
 AlertDialogTitle.displayName = AlertDialogPrimitive__namespace.Title.displayName;
-const AlertDialogDescription = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(AlertDialogPrimitive__namespace.Description, { ref, className: cn("text-sm text-neutral3", className), ...props }));
+const AlertDialogDescription = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(AlertDialogPrimitive__namespace.Description, { ref, className: cn("text-ui-sm text-neutral3", className), ...props }));
 AlertDialogDescription.displayName = AlertDialogPrimitive__namespace.Description.displayName;
 const AlertDialogAction = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   AlertDialogPrimitive__namespace.Action,
@@ -6074,7 +6097,7 @@ const AlertDialogCancel = React__namespace.forwardRef(({ className, ...props },
   AlertDialogPrimitive__namespace.Cancel,
   {
     ref,
-    className: cn(buttonVariants({ variant: "default", size: "default" }), "mt-2 sm:mt-0", className),
+    className: cn(buttonVariants({ variant: "default", size: "default" }), className),
     ...props
   }
 ));
@@ -6085,6 +6108,7 @@ AlertDialog.Overlay = AlertDialogOverlay;
 AlertDialog.Content = AlertDialogContent;
 AlertDialog.Header = AlertDialogHeader;
 AlertDialog.Footer = AlertDialogFooter;
+AlertDialog.Body = AlertDialogBody;
 AlertDialog.Title = AlertDialogTitle;
 AlertDialog.Description = AlertDialogDescription;
 AlertDialog.Action = AlertDialogAction;
@@ -6236,7 +6260,7 @@ function Combobox({
   emptyText = "No option found.",
   className,
   disabled = false,
-  variant = "inputLike",
+  variant = "default",
   size = "default",
   open,
   onOpenChange,
@@ -7013,7 +7037,7 @@ const Select = SelectPrimitive__namespace.Root;
 const SelectGroup = SelectPrimitive__namespace.Group;
 const SelectValue = SelectPrimitive__namespace.Value;
 const SelectTrigger = React__namespace.forwardRef(
-  ({ className, children, variant = "inputLike", size = "default", ...props }, ref) => {
+  ({ className, children, variant = "default", size = "default", ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsxs(
       SelectPrimitive__namespace.Trigger,
       {
@@ -7116,53 +7140,6 @@ function SelectFieldBlock({
   ] });
 }
 
-const sizeClasses$3 = {
-  sm: `${formElementSizes.sm} w-form-sm`,
-  md: `${formElementSizes.md} w-form-md`,
-  lg: `${formElementSizes.lg} w-form-lg`,
-  default: `${formElementSizes.default}`
-};
-const iconSizeMap = {
-  sm: "sm",
-  md: "default",
-  lg: "lg",
-  default: "default"
-};
-const variantClasses = {
-  default: "bg-surface2 hover:bg-surface4 text-neutral3 hover:text-neutral6 disabled:opacity-50 disabled:cursor-not-allowed",
-  light: "bg-surface3 hover:bg-surface5 text-neutral6 disabled:opacity-50 disabled:cursor-not-allowed",
-  outline: "bg-transparent hover:bg-surface2 text-neutral3 hover:text-neutral6 disabled:opacity-50 disabled:cursor-not-allowed",
-  ghost: "bg-transparent border-transparent hover:bg-surface2 text-neutral3 hover:text-neutral6 disabled:opacity-50 disabled:cursor-not-allowed",
-  primary: "bg-accent1 hover:bg-accent1/90 text-surface1 font-medium hover:shadow-glow-accent1 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:shadow-none"
-};
-const baseButtonStyles = "border border-border1 inline-flex items-center justify-center rounded-md transition-all duration-normal ease-out-custom active:scale-[0.98]";
-const IconButton = React.forwardRef(
-  ({ className, children, tooltip, size = "md", variant = "default", disabled, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          ref,
-          disabled,
-          "aria-label": typeof tooltip === "string" ? tooltip : void 0,
-          className: cn(
-            baseButtonStyles,
-            formElementFocus,
-            variantClasses[variant],
-            sizeClasses$3[size],
-            disabled && "active:scale-100",
-            className
-          ),
-          ...props,
-          children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: iconSizeMap[size], children })
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: tooltip })
-    ] });
-  }
-);
-IconButton.displayName = "IconButton";
-
 const themeClasses = {
   light: "bg-gray-100 border-gray-300 text-gray-700 shadow-[0_1px_0_rgba(0,0,0,0.1)]",
   dark: "bg-surface4 border-border1 text-neutral5 shadow-[0_1px_0_rgba(0,0,0,0.3)]"
@@ -9058,7 +9035,7 @@ const DateTimePickerContent = ({
 };
 const DefaultTrigger = React__namespace.forwardRef(
   ({ value, placeholder, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs(Button, { ref, className: cn("justify-start", className), variant: "inputLike", ...props, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Button, { ref, className: cn("justify-start", className), ...props, children: [
       /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CalendarIcon, { className: "h-4 w-4" }),
       value ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-white", children: dateFns.format(value, "PP p") }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray", children: placeholder ?? "Pick a date" })
     ] });
@@ -9770,7 +9747,7 @@ function FieldNullable({
 
 function FieldRemove({ children, tooltip = "Remove field", ...props }) {
   const { remove } = useJSONSchemaFormField();
-  return /* @__PURE__ */ jsxRuntime.jsx(ButtonWithTooltip, { tooltipContent: tooltip, onClick: remove, size: "md", ...props, children: children || /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2Icon, {}) });
+  return /* @__PURE__ */ jsxRuntime.jsx(Button, { ...props, tooltip, onClick: remove, size: "icon-md", children: children || /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2Icon, {}) });
 }
 
 function NestedFields({ className, children }) {
@@ -14850,7 +14827,7 @@ const RuleRow = ({ schema, rule, onChange, onRemove, className }) => {
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(IconButton, { type: "button", onClick: onRemove, tooltip: "Remove rule", size: "sm", variant: "ghost", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, {}) })
+    /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "button", onClick: onRemove, tooltip: "Remove rule", size: "icon-sm", variant: "ghost", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, {}) })
   ] });
 };
 
@@ -14889,7 +14866,7 @@ const RuleGroupView = ({ schema, group, onChange, onRemove, depth, maxDepth }) =
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(isRoot ? "bg-surface2" : "pl-6 bg-surface3"), children: [
     !isRoot && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between pl-3 pr-4 py-1.5 border-b border-border1 border-dashed", children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui-xs text-neutral3", children: "Group" }),
-      onRemove && /* @__PURE__ */ jsxRuntime.jsx(IconButton, { type: "button", onClick: onRemove, tooltip: "Remove group", size: "sm", variant: "ghost", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, {}) })
+      onRemove && /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "button", onClick: onRemove, tooltip: "Remove group", size: "icon-sm", variant: "ghost", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, {}) })
     ] }),
     group.conditions.map((condition, index) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-b border-border1 border-dashed last:border-b-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative", isRule(condition) && "p-4 border-l-4 border-border1"), children: [
       index > 0 && /* @__PURE__ */ jsxRuntime.jsx(
@@ -19365,7 +19342,6 @@ exports.HomeIcon = HomeIcon;
 exports.HorizontalBars = HorizontalBars;
 exports.HoverPopover = HoverPopover;
 exports.Icon = Icon;
-exports.IconButton = IconButton;
 exports.InfoIcon = InfoIcon;
 exports.Input = Input;
 exports.ItemList = ItemList;