@sero-ai/ui 0.4.1 → 0.4.2

package/dist/components/dashboard/metric.js

@@ -34,7 +34,7 @@ function Metric({
       children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
           icon && /* @__PURE__ */ jsx(Icon, { icon, size: "sm" }),
-          /* @__PURE__ */ jsx("span", { className: "truncate text-[11px] font-medium uppercase tracking-wide text-[var(--text-muted)]", children: label })
+          /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium uppercase tracking-wide text-[var(--text-muted)]", children: label })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-1.5", children: [
           /* @__PURE__ */ jsx(

package/dist/components/dashboard/stale-indicator.cjs

@@ -15,7 +15,7 @@ function StaleIndicator({
     {
       "data-slot": "stale-indicator",
       className: _utils.cn.call(void 0, 
-        "flex items-center gap-1.5 text-[11px] text-[var(--text-muted)]",
+        "flex items-center gap-1.5 text-sm text-[var(--text-muted)]",
         className
       ),
       ...props,

package/dist/components/dashboard/stale-indicator.js

@@ -15,7 +15,7 @@ function StaleIndicator({
     {
       "data-slot": "stale-indicator",
       className: cn(
-        "flex items-center gap-1.5 text-[11px] text-[var(--text-muted)]",
+        "flex items-center gap-1.5 text-sm text-[var(--text-muted)]",
         className
       ),
       ...props,

package/dist/components/dashboard/typography.cjs

@@ -5,11 +5,11 @@ var _tone = require('./tone');
 const textVariants = _classvarianceauthority.cva.call(void 0, "min-w-0", {
   variants: {
     variant: {
-      body: "text-sm text-[var(--text-primary)]",
-      label: "text-[11px] font-semibold uppercase tracking-wider text-[var(--text-muted)]",
+      body: "text-base text-[var(--text-primary)]",
+      label: "text-sm font-semibold uppercase tracking-wider text-[var(--text-muted)]",
       supporting: "text-xs text-[var(--text-secondary)]",
       muted: "text-xs text-[var(--text-muted)]",
-      numeric: "text-sm font-semibold tabular-nums text-[var(--text-primary)]"
+      numeric: "text-base font-semibold tabular-nums text-[var(--text-primary)]"
     }
   },
   defaultVariants: { variant: "body" }
@@ -43,7 +43,7 @@ function Text({
 }
 const headingSize = {
   sm: "text-xs font-semibold",
-  md: "text-sm font-semibold",
+  md: "text-base font-semibold",
   lg: "text-base font-semibold"
 };
 function Heading({

package/dist/components/dashboard/typography.d.cts

@@ -20,7 +20,7 @@ interface TextProps extends Omit<React.ComponentProps<"span">, "color">, Variant
 declare function Text({ className, variant, truncate, clamp, tone, ...props }: TextProps): react_jsx_runtime.JSX.Element;
 declare const headingSize: {
     readonly sm: "text-xs font-semibold";
-    readonly md: "text-sm font-semibold";
+    readonly md: "text-base font-semibold";
     readonly lg: "text-base font-semibold";
 };
 interface HeadingProps extends React.ComponentProps<"h2"> {

package/dist/components/dashboard/typography.d.ts

@@ -20,7 +20,7 @@ interface TextProps extends Omit<React.ComponentProps<"span">, "color">, Variant
 declare function Text({ className, variant, truncate, clamp, tone, ...props }: TextProps): react_jsx_runtime.JSX.Element;
 declare const headingSize: {
     readonly sm: "text-xs font-semibold";
-    readonly md: "text-sm font-semibold";
+    readonly md: "text-base font-semibold";
     readonly lg: "text-base font-semibold";
 };
 interface HeadingProps extends React.ComponentProps<"h2"> {

package/dist/components/dashboard/typography.js

@@ -5,11 +5,11 @@ import { toneColor } from "./tone";
 const textVariants = cva("min-w-0", {
   variants: {
     variant: {
-      body: "text-sm text-[var(--text-primary)]",
-      label: "text-[11px] font-semibold uppercase tracking-wider text-[var(--text-muted)]",
+      body: "text-base text-[var(--text-primary)]",
+      label: "text-sm font-semibold uppercase tracking-wider text-[var(--text-muted)]",
       supporting: "text-xs text-[var(--text-secondary)]",
       muted: "text-xs text-[var(--text-muted)]",
-      numeric: "text-sm font-semibold tabular-nums text-[var(--text-primary)]"
+      numeric: "text-base font-semibold tabular-nums text-[var(--text-primary)]"
     }
   },
   defaultVariants: { variant: "body" }
@@ -43,7 +43,7 @@ function Text({
 }
 const headingSize = {
   sm: "text-xs font-semibold",
-  md: "text-sm font-semibold",
+  md: "text-base font-semibold",
   lg: "text-base font-semibold"
 };
 function Heading({

package/dist/components/model-selection/available-model-picker.cjs

@@ -71,7 +71,7 @@ function AvailableModelPicker({
         role: "button",
         tabIndex: disabled ? -1 : 0,
         className: _utils.cn.call(void 0, 
-          "flex w-full items-center gap-2 rounded-md border border-input bg-background px-3 py-2 text-left text-sm transition-colors",
+          "flex w-full items-center gap-2 rounded-md border border-input bg-background px-3 py-2 text-left text-base transition-colors",
           "hover:bg-secondary/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
           disabled && "cursor-not-allowed opacity-50",
           className
@@ -91,9 +91,9 @@ function AvailableModelPicker({
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "truncate font-medium text-foreground", children: selected.model.name }),
                 selected.model.reasoning ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Sparkles, { className: "size-3 shrink-0 text-amber-500/70" }) : null
               ] }),
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "truncate text-[11px] text-muted-foreground", children: selected.group.displayName })
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "truncate text-sm text-muted-foreground", children: selected.group.displayName })
             ] })
-          ] }) : selected.fallbackLabel ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "min-w-0 flex-1 truncate font-mono text-xs text-muted-foreground", children: selected.fallbackLabel }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "min-w-0 flex-1 truncate text-muted-foreground", children: placeholder }),
+          ] }) : selected.fallbackLabel ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "min-w-0 flex-1 truncate font-mono text-sm text-muted-foreground", children: selected.fallbackLabel }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "min-w-0 flex-1 truncate text-muted-foreground", children: placeholder }),
           allowClear && value ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             "button",
             {
@@ -127,7 +127,7 @@ function AvailableModelPicker({
               containerClassName: "border-b border-border/40"
             }
           ),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "max-h-[280px] overflow-y-auto py-1", children: groups.length === 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "px-3 py-4 text-center text-xs text-muted-foreground", children: noModelsLabel }) : totalResults === 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "px-3 py-4 text-center text-xs text-muted-foreground", children: emptyLabel }) : filteredGroups.map((group, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "max-h-[280px] overflow-y-auto py-1", children: groups.length === 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "px-3 py-4 text-center text-sm text-muted-foreground", children: noModelsLabel }) : totalResults === 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "px-3 py-4 text-center text-sm text-muted-foreground", children: emptyLabel }) : filteredGroups.map((group, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
             index > 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "mx-3 border-t border-border/30" }) : null,
             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-2 px-3 pb-1 pt-2", children: [
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -138,7 +138,7 @@ function AvailableModelPicker({
                   className: "size-3.5 shrink-0 rounded-sm dark:invert"
                 }
               ),
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-[10px] font-semibold uppercase tracking-wider text-muted-foreground", children: group.displayName })
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-sm font-semibold uppercase tracking-wider text-muted-foreground", children: group.displayName })
             ] }),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "px-1", children: group.models.map((model) => {
               const nextValue = _common.modelKey.call(void 0, model.provider, model.modelId);
@@ -149,7 +149,7 @@ function AvailableModelPicker({
                   type: "button",
                   onClick: () => handleSelect(model.provider, model.modelId),
                   className: _utils.cn.call(void 0, 
-                    "flex w-full items-center gap-2.5 rounded-lg px-2.5 py-1.5 text-left text-xs transition-colors",
+                    "flex w-full items-center gap-2.5 rounded-lg px-2.5 py-1.5 text-left text-sm transition-colors",
                     isSelected ? "bg-secondary text-foreground" : "text-muted-foreground hover:bg-secondary/60 hover:text-foreground"
                   ),
                   children: [

package/dist/components/model-selection/available-model-picker.js

@@ -71,7 +71,7 @@ function AvailableModelPicker({
         role: "button",
         tabIndex: disabled ? -1 : 0,
         className: cn(
-          "flex w-full items-center gap-2 rounded-md border border-input bg-background px-3 py-2 text-left text-sm transition-colors",
+          "flex w-full items-center gap-2 rounded-md border border-input bg-background px-3 py-2 text-left text-base transition-colors",
           "hover:bg-secondary/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
           disabled && "cursor-not-allowed opacity-50",
           className
@@ -91,9 +91,9 @@ function AvailableModelPicker({
                 /* @__PURE__ */ jsx("span", { className: "truncate font-medium text-foreground", children: selected.model.name }),
                 selected.model.reasoning ? /* @__PURE__ */ jsx(Sparkles, { className: "size-3 shrink-0 text-amber-500/70" }) : null
               ] }),
-              /* @__PURE__ */ jsx("div", { className: "truncate text-[11px] text-muted-foreground", children: selected.group.displayName })
+              /* @__PURE__ */ jsx("div", { className: "truncate text-sm text-muted-foreground", children: selected.group.displayName })
             ] })
-          ] }) : selected.fallbackLabel ? /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate font-mono text-xs text-muted-foreground", children: selected.fallbackLabel }) : /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-muted-foreground", children: placeholder }),
+          ] }) : selected.fallbackLabel ? /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate font-mono text-sm text-muted-foreground", children: selected.fallbackLabel }) : /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-muted-foreground", children: placeholder }),
           allowClear && value ? /* @__PURE__ */ jsx(
             "button",
             {
@@ -127,7 +127,7 @@ function AvailableModelPicker({
               containerClassName: "border-b border-border/40"
             }
           ),
-          /* @__PURE__ */ jsx("div", { className: "max-h-[280px] overflow-y-auto py-1", children: groups.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-3 py-4 text-center text-xs text-muted-foreground", children: noModelsLabel }) : totalResults === 0 ? /* @__PURE__ */ jsx("div", { className: "px-3 py-4 text-center text-xs text-muted-foreground", children: emptyLabel }) : filteredGroups.map((group, index) => /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("div", { className: "max-h-[280px] overflow-y-auto py-1", children: groups.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-3 py-4 text-center text-sm text-muted-foreground", children: noModelsLabel }) : totalResults === 0 ? /* @__PURE__ */ jsx("div", { className: "px-3 py-4 text-center text-sm text-muted-foreground", children: emptyLabel }) : filteredGroups.map((group, index) => /* @__PURE__ */ jsxs("div", { children: [
             index > 0 ? /* @__PURE__ */ jsx("div", { className: "mx-3 border-t border-border/30" }) : null,
             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 pb-1 pt-2", children: [
               /* @__PURE__ */ jsx(
@@ -138,7 +138,7 @@ function AvailableModelPicker({
                   className: "size-3.5 shrink-0 rounded-sm dark:invert"
                 }
               ),
-              /* @__PURE__ */ jsx("span", { className: "text-[10px] font-semibold uppercase tracking-wider text-muted-foreground", children: group.displayName })
+              /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold uppercase tracking-wider text-muted-foreground", children: group.displayName })
             ] }),
             /* @__PURE__ */ jsx("div", { className: "px-1", children: group.models.map((model) => {
               const nextValue = modelKey(model.provider, model.modelId);
@@ -149,7 +149,7 @@ function AvailableModelPicker({
                   type: "button",
                   onClick: () => handleSelect(model.provider, model.modelId),
                   className: cn(
-                    "flex w-full items-center gap-2.5 rounded-lg px-2.5 py-1.5 text-left text-xs transition-colors",
+                    "flex w-full items-center gap-2.5 rounded-lg px-2.5 py-1.5 text-left text-sm transition-colors",
                     isSelected ? "bg-secondary text-foreground" : "text-muted-foreground hover:bg-secondary/60 hover:text-foreground"
                   ),
                   children: [

package/dist/components/model-selection/thinking-level-picker.cjs

@@ -24,7 +24,7 @@ function ThinkingLevelPicker({
         disabled: disabled || !isAvailable,
         onClick: () => onChange(level),
         className: _utils.cn.call(void 0, 
-          "rounded-md px-2 py-1.5 text-[11px] font-medium transition-colors",
+          "rounded-md px-2 py-1.5 text-sm font-medium transition-colors",
           isActive ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:bg-background/70 hover:text-foreground",
           (!isAvailable || disabled) && "cursor-not-allowed opacity-40 hover:bg-transparent hover:text-muted-foreground"
         ),

package/dist/components/model-selection/thinking-level-picker.js

@@ -24,7 +24,7 @@ function ThinkingLevelPicker({
         disabled: disabled || !isAvailable,
         onClick: () => onChange(level),
         className: cn(
-          "rounded-md px-2 py-1.5 text-[11px] font-medium transition-colors",
+          "rounded-md px-2 py-1.5 text-sm font-medium transition-colors",
           isActive ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:bg-background/70 hover:text-foreground",
           (!isAvailable || disabled) && "cursor-not-allowed opacity-40 hover:bg-transparent hover:text-muted-foreground"
         ),

package/dist/components/model-selection/thinking-picker.cjs

@@ -0,0 +1,70 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _jsxruntime = require('react/jsx-runtime');
+var _lucidereact = require('lucide-react');
+var _react = require('motion/react');
+var _common = require('@sero-ai/common');
+var _utils = require('../../lib/utils');
+const COMPACT_LABELS = {
+  ..._common.THINKING_LABELS,
+  xhigh: "X-High"
+};
+function ThinkingPicker({
+  available,
+  current,
+  disabled,
+  onSelect,
+  className
+}) {
+  const levels = disabled ? _common.THINKING_LEVELS : _common.THINKING_LEVELS.filter((level) => level === "off" || available.includes(level));
+  const activeIndex = Math.max(
+    0,
+    levels.indexOf(disabled ? "off" : current)
+  );
+  const isOff = disabled || current === "off";
+  const isMax = !disabled && current === "max";
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      className: _utils.cn.call(void 0, `flex flex-col gap-2 border-[var(--border-subtle)] px-3 py-3 transition-opacity duration-150 ${disabled ? "pointer-events-none opacity-40" : ""}`, className),
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Brain, { className: "size-3 text-[var(--text-muted)]" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-sm font-semibold uppercase tracking-wider text-[var(--text-muted)]", children: "Thinking" })
+        ] }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "relative flex rounded-lg border border-[var(--border-subtle)] bg-[var(--bg-base)] p-0.5", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _react.motion.div,
+            {
+              className: "absolute inset-y-0.5 rounded-md shadow-sm ring-1 ring-inset ring-white/5",
+              initial: false,
+              animate: {
+                x: `${activeIndex * 100}%`,
+                width: `${100 / levels.length}%`
+              },
+              transition: { type: "spring", stiffness: 500, damping: 38 },
+              style: {
+                background: isOff ? "var(--bg-elevated)" : isMax ? "linear-gradient(135deg, #f59e0b40, #ef444440)" : "linear-gradient(135deg, #6366f140, #8b5cf640)"
+              }
+            }
+          ),
+          levels.map((level) => {
+            const isActive = current === level && !disabled;
+            const textClass = isActive ? level === "max" ? "text-status-warning" : level === "off" ? "text-[var(--text-primary)]" : "text-[var(--banner-primary)]" : "text-[var(--text-muted)] hover:text-[var(--text-secondary)]";
+            return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "button",
+              {
+                type: "button",
+                onClick: () => onSelect(level),
+                className: `relative z-10 flex flex-1 items-center justify-center whitespace-nowrap rounded-md py-1.5 text-sm font-medium leading-none transition-colors duration-150 ${textClass}`,
+                children: COMPACT_LABELS[level]
+              },
+              level
+            );
+          })
+        ] })
+      ]
+    }
+  );
+}
+
+
+exports.ThinkingPicker = ThinkingPicker;

package/dist/components/model-selection/thinking-picker.d.cts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface ThinkingPickerProps {
+    available: readonly string[];
+    current: string;
+    disabled: boolean;
+    onSelect: (level: string) => void;
+    className?: string;
+}
+declare function ThinkingPicker({ available, current, disabled, onSelect, className }: ThinkingPickerProps): react_jsx_runtime.JSX.Element;
+
+export { ThinkingPicker };

package/dist/components/model-selection/thinking-picker.d.ts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface ThinkingPickerProps {
+    available: readonly string[];
+    current: string;
+    disabled: boolean;
+    onSelect: (level: string) => void;
+    className?: string;
+}
+declare function ThinkingPicker({ available, current, disabled, onSelect, className }: ThinkingPickerProps): react_jsx_runtime.JSX.Element;
+
+export { ThinkingPicker };

package/dist/components/model-selection/thinking-picker.js

@@ -0,0 +1,70 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Brain } from "lucide-react";
+import { motion } from "motion/react";
+import { THINKING_LABELS, THINKING_LEVELS } from "@sero-ai/common";
+import { cn } from "../../lib/utils";
+const COMPACT_LABELS = {
+  ...THINKING_LABELS,
+  xhigh: "X-High"
+};
+function ThinkingPicker({
+  available,
+  current,
+  disabled,
+  onSelect,
+  className
+}) {
+  const levels = disabled ? THINKING_LEVELS : THINKING_LEVELS.filter((level) => level === "off" || available.includes(level));
+  const activeIndex = Math.max(
+    0,
+    levels.indexOf(disabled ? "off" : current)
+  );
+  const isOff = disabled || current === "off";
+  const isMax = !disabled && current === "max";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(`flex flex-col gap-2 border-[var(--border-subtle)] px-3 py-3 transition-opacity duration-150 ${disabled ? "pointer-events-none opacity-40" : ""}`, className),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx(Brain, { className: "size-3 text-[var(--text-muted)]" }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold uppercase tracking-wider text-[var(--text-muted)]", children: "Thinking" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "relative flex rounded-lg border border-[var(--border-subtle)] bg-[var(--bg-base)] p-0.5", children: [
+          /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              className: "absolute inset-y-0.5 rounded-md shadow-sm ring-1 ring-inset ring-white/5",
+              initial: false,
+              animate: {
+                x: `${activeIndex * 100}%`,
+                width: `${100 / levels.length}%`
+              },
+              transition: { type: "spring", stiffness: 500, damping: 38 },
+              style: {
+                background: isOff ? "var(--bg-elevated)" : isMax ? "linear-gradient(135deg, #f59e0b40, #ef444440)" : "linear-gradient(135deg, #6366f140, #8b5cf640)"
+              }
+            }
+          ),
+          levels.map((level) => {
+            const isActive = current === level && !disabled;
+            const textClass = isActive ? level === "max" ? "text-status-warning" : level === "off" ? "text-[var(--text-primary)]" : "text-[var(--banner-primary)]" : "text-[var(--text-muted)] hover:text-[var(--text-secondary)]";
+            return /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => onSelect(level),
+                className: `relative z-10 flex flex-1 items-center justify-center whitespace-nowrap rounded-md py-1.5 text-sm font-medium leading-none transition-colors duration-150 ${textClass}`,
+                children: COMPACT_LABELS[level]
+              },
+              level
+            );
+          })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  ThinkingPicker
+};

package/dist/components/ui/accordion.cjs

@@ -30,7 +30,7 @@ function AccordionTrigger({
     {
       "data-slot": "accordion-trigger",
       className: _utils.cn.call(void 0, 
-        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-base font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
         className
       ),
       ...props,
@@ -50,7 +50,7 @@ function AccordionContent({
     _radixui.Accordion.Content,
     {
       "data-slot": "accordion-content",
-      className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm",
+      className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-base",
       ...props,
       children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _utils.cn.call(void 0, "pt-0 pb-4", className), children })
     }

package/dist/components/ui/accordion.js

@@ -30,7 +30,7 @@ function AccordionTrigger({
     {
       "data-slot": "accordion-trigger",
       className: cn(
-        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-base font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
         className
       ),
       ...props,
@@ -50,7 +50,7 @@ function AccordionContent({
     AccordionPrimitive.Content,
     {
       "data-slot": "accordion-content",
-      className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm",
+      className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-base",
       ...props,
       children: /* @__PURE__ */ jsx("div", { className: cn("pt-0 pb-4", className), children })
     }

package/dist/components/ui/alert-dialog.cjs

@@ -2,6 +2,7 @@
 var _jsxruntime = require('react/jsx-runtime');
 var _radixui = require('radix-ui');
 var _utils = require('../../lib/utils');
+var _pluginstylescopecontext = require('../../plugin-style-scope-context');
 var _button = require('./button');
 function AlertDialog({
   ...props
@@ -16,7 +17,8 @@ function AlertDialogTrigger({
 function AlertDialogPortal({
   ...props
 }) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _radixui.AlertDialog.Portal, { "data-slot": "alert-dialog-portal", ...props });
+  const container = _pluginstylescopecontext.usePluginPortalContainer.call(void 0, );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _radixui.AlertDialog.Portal, { "data-slot": "alert-dialog-portal", container, ...props });
 }
 function AlertDialogOverlay({
   className,
@@ -111,7 +113,7 @@ function AlertDialogDescription({
     _radixui.AlertDialog.Description,
     {
       "data-slot": "alert-dialog-description",
-      className: _utils.cn.call(void 0, "text-muted-foreground text-sm", className),
+      className: _utils.cn.call(void 0, "text-muted-foreground text-base", className),
       ...props
     }
   );

package/dist/components/ui/alert-dialog.js

@@ -2,6 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
 import { cn } from "../../lib/utils";
+import { usePluginPortalContainer } from "../../plugin-style-scope-context";
 import { Button } from "./button";
 function AlertDialog({
   ...props
@@ -16,7 +17,8 @@ function AlertDialogTrigger({
 function AlertDialogPortal({
   ...props
 }) {
-  return /* @__PURE__ */ jsx(AlertDialogPrimitive.Portal, { "data-slot": "alert-dialog-portal", ...props });
+  const container = usePluginPortalContainer();
+  return /* @__PURE__ */ jsx(AlertDialogPrimitive.Portal, { "data-slot": "alert-dialog-portal", container, ...props });
 }
 function AlertDialogOverlay({
   className,
@@ -111,7 +113,7 @@ function AlertDialogDescription({
     AlertDialogPrimitive.Description,
     {
       "data-slot": "alert-dialog-description",
-      className: cn("text-muted-foreground text-sm", className),
+      className: cn("text-muted-foreground text-base", className),
       ...props
     }
   );

package/dist/components/ui/alert.cjs

@@ -2,7 +2,7 @@
 var _classvarianceauthority = require('class-variance-authority');
 var _utils = require('../../lib/utils');
 const alertVariants = _classvarianceauthority.cva.call(void 0, 
-  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  "relative w-full rounded-lg border px-4 py-3 text-base grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
   {
     variants: {
       variant: {
@@ -52,7 +52,7 @@ function AlertDescription({
     {
       "data-slot": "alert-description",
       className: _utils.cn.call(void 0, 
-        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-base [&_p]:leading-relaxed",
         className
       ),
       ...props

package/dist/components/ui/alert.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { cn } from "../../lib/utils";
 const alertVariants = cva(
-  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  "relative w-full rounded-lg border px-4 py-3 text-base grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
   {
     variants: {
       variant: {
@@ -52,7 +52,7 @@ function AlertDescription({
     {
       "data-slot": "alert-description",
       className: cn(
-        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-base [&_p]:leading-relaxed",
         className
       ),
       ...props

package/dist/components/ui/avatar.cjs

@@ -41,7 +41,7 @@ function AvatarFallback({
     {
       "data-slot": "avatar-fallback",
       className: _utils.cn.call(void 0, 
-        "bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs",
+        "bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-base group-data-[size=sm]/avatar:text-xs",
         className
       ),
       ...props
@@ -86,7 +86,7 @@ function AvatarGroupCount({
     {
       "data-slot": "avatar-group-count",
       className: _utils.cn.call(void 0, 
-        "bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+        "bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-base ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
         className
       ),
       ...props

package/dist/components/ui/avatar.js

@@ -41,7 +41,7 @@ function AvatarFallback({
     {
       "data-slot": "avatar-fallback",
       className: cn(
-        "bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs",
+        "bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-base group-data-[size=sm]/avatar:text-xs",
         className
       ),
       ...props
@@ -86,7 +86,7 @@ function AvatarGroupCount({
     {
       "data-slot": "avatar-group-count",
       className: cn(
-        "bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+        "bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-base ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
         className
       ),
       ...props

package/dist/components/ui/breadcrumb.cjs

@@ -11,7 +11,7 @@ function BreadcrumbList({ className, ...props }) {
     {
       "data-slot": "breadcrumb-list",
       className: _utils.cn.call(void 0, 
-        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
+        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-base break-words sm:gap-2.5",
         className
       ),
       ...props

package/dist/components/ui/breadcrumb.js

@@ -11,7 +11,7 @@ function BreadcrumbList({ className, ...props }) {
     {
       "data-slot": "breadcrumb-list",
       className: cn(
-        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
+        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-base break-words sm:gap-2.5",
         className
       ),
       ...props

package/dist/components/ui/button-group.cjs

@@ -43,7 +43,7 @@ function ButtonGroupText({
     Comp,
     {
       className: _utils.cn.call(void 0, 
-        "bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        "bg-muted flex items-center gap-2 rounded-md border px-4 text-base font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props

package/dist/components/ui/button-group.js

@@ -43,7 +43,7 @@ function ButtonGroupText({
     Comp,
     {
       className: cn(
-        "bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        "bg-muted flex items-center gap-2 rounded-md border px-4 text-base font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props

package/dist/components/ui/button.cjs

@@ -3,7 +3,7 @@ var _classvarianceauthority = require('class-variance-authority');
 var _radixui = require('radix-ui');
 var _utils = require('../../lib/utils');
 const buttonVariants = _classvarianceauthority.cva.call(void 0, 
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-base font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {

package/dist/components/ui/button.js

@@ -3,7 +3,7 @@ import { cva } from "class-variance-authority";
 import { Slot } from "radix-ui";
 import { cn } from "../../lib/utils";
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-base font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {