@vertz/theme-shadcn 0.2.23 → 0.2.24

package/dist/index.js

@@ -5,461 +5,31 @@ import {
   createBadge,
   createButton,
   textOpacity
-} from "./shared/chunk-gzfp8m46.js";
+} from "./shared/chunk-kmh677y0.js";
 import {
-  configureThemeBase
-} from "./shared/chunk-gjsm05ga.js";
-
-// src/components/alert.ts
-import { resolveChildren } from "@vertz/ui";
-function createAlertComponents(alertStyles) {
-  function Alert({ variant, className, class: classProp, children }) {
-    const effectiveClass = className ?? classProp;
-    const el = document.createElement("div");
-    const classes = [alertStyles.root];
-    if (variant === "destructive") {
-      classes.push(alertStyles.destructive);
-    }
-    if (effectiveClass) {
-      classes.push(effectiveClass);
-    }
-    el.className = classes.join(" ");
-    el.setAttribute("role", "alert");
-    for (const node of resolveChildren(children)) {
-      el.appendChild(node);
-    }
-    return el;
-  }
-  function AlertTitle({ className, class: classProp, children }) {
-    const effectiveClass = className ?? classProp;
-    const el = document.createElement("h5");
-    el.className = [alertStyles.title, effectiveClass].filter(Boolean).join(" ");
-    for (const node of resolveChildren(children)) {
-      el.appendChild(node);
-    }
-    return el;
-  }
-  function AlertDescription({ className, class: classProp, children }) {
-    const effectiveClass = className ?? classProp;
-    const el = document.createElement("div");
-    el.className = [alertStyles.description, effectiveClass].filter(Boolean).join(" ");
-    for (const node of resolveChildren(children)) {
-      el.appendChild(node);
-    }
-    return el;
-  }
-  return { Alert, AlertTitle, AlertDescription };
-}
-
-// src/components/avatar.ts
-import { resolveChildren as resolveChildren2 } from "@vertz/ui";
-function createAvatarComponents(avatarStyles) {
-  function Avatar({ className, class: classProp, children }) {
-    const effectiveClass = className ?? classProp;
-    const el = document.createElement("div");
-    el.className = [avatarStyles.root, effectiveClass].filter(Boolean).join(" ");
-    for (const node of resolveChildren2(children)) {
-      el.appendChild(node);
-    }
-    return el;
-  }
-  function AvatarImage({
-    src,
-    alt,
-    className,
-    class: classProp
-  }) {
-    const effectiveClass = className ?? classProp;
-    const el = document.createElement("img");
-    el.className = [avatarStyles.image, effectiveClass].filter(Boolean).join(" ");
-    el.src = src;
-    el.alt = alt;
-    return el;
-  }
-  function AvatarFallback({ className, class: classProp, children }) {
-    const effectiveClass = className ?? classProp;
-    const el = document.createElement("div");
-    el.className = [avatarStyles.fallback, effectiveClass].filter(Boolean).join(" ");
-    for (const node of resolveChildren2(children)) {
-      el.appendChild(node);
-    }
-    return el;
-  }
-  return { Avatar, AvatarImage, AvatarFallback };
-}
-
-// src/components/badge.ts
-import { resolveChildren as resolveChildren3 } from "@vertz/ui";
-function createBadgeComponent(badgeStyles) {
-  const colorStyles = {
-    blue: { backgroundColor: "oklch(0.55 0.15 250)", color: "#fff" },
-    green: { backgroundColor: "oklch(0.55 0.15 155)", color: "#fff" },
-    yellow: { backgroundColor: "oklch(0.75 0.15 85)", color: "oklch(0.25 0.05 85)" }
-  };
-  return function Badge({
-    color,
-    className,
-    class: classProp,
-    children
-  }) {
-    const effectiveClass = className ?? classProp;
-    const el = document.createElement("span");
-    el.className = [badgeStyles({ color }), effectiveClass].filter(Boolean).join(" ");
-    const inlineStyle = color ? colorStyles[color] : undefined;
-    if (inlineStyle) {
-      Object.assign(el.style, inlineStyle);
-    }
-    for (const node of resolveChildren3(children)) {
-      el.appendChild(node);
-    }
-    return el;
-  };
-}
-
-// src/components/breadcrumb.ts
-function createBreadcrumbComponent(styles) {
-  return function Breadcrumb(props) {
-    const { items, separator = "/", className, class: classProp } = props;
-    const effectiveClass = className ?? classProp;
-    const nav = document.createElement("nav");
-    nav.setAttribute("aria-label", "Breadcrumb");
-    if (styles.nav)
-      nav.className = styles.nav;
-    if (effectiveClass) {
-      nav.className = [nav.className, effectiveClass].filter(Boolean).join(" ");
-    }
-    const ol = document.createElement("ol");
-    ol.className = styles.list;
-    for (let i = 0;i < items.length; i++) {
-      const item = items[i];
-      const li = document.createElement("li");
-      li.className = styles.item;
-      const isLast = i === items.length - 1;
-      if (isLast) {
-        const span = document.createElement("span");
-        span.setAttribute("aria-current", "page");
-        span.className = styles.page;
-        span.textContent = item.label;
-        li.appendChild(span);
-      } else {
-        if (item.href) {
-          const a = document.createElement("a");
-          a.href = item.href;
-          a.className = styles.link;
-          a.textContent = item.label;
-          li.appendChild(a);
-        } else {
-          const span = document.createElement("span");
-          span.className = styles.link;
-          span.textContent = item.label;
-          li.appendChild(span);
-        }
-      }
-      ol.appendChild(li);
-      if (!isLast) {
-        const sepLi = document.createElement("li");
-        sepLi.setAttribute("role", "presentation");
-        sepLi.setAttribute("aria-hidden", "true");
-        sepLi.className = styles.separator;
-        sepLi.textContent = separator;
-        ol.appendChild(sepLi);
-      }
-    }
-    nav.appendChild(ol);
-    return nav;
-  };
-}
-
-// src/components/button.ts
-import { resolveChildren as resolveChildren4 } from "@vertz/ui";
-import { applyProps } from "@vertz/ui-primitives/utils";
-function createButtonComponent(buttonStyles) {
-  return function Button({
-    intent,
-    size,
-    className,
-    class: classProp,
-    children,
-    disabled,
-    type,
-    ...rest
-  }) {
-    const effectiveClass = className ?? classProp;
-    const el = document.createElement("button");
-    el.type = type ?? "button";
-    el.className = [buttonStyles({ intent, size }), effectiveClass].filter(Boolean).join(" ");
-    if (disabled)
-      el.disabled = true;
-    applyProps(el, rest);
-    for (const node of resolveChildren4(children)) {
-      el.appendChild(node);
-    }
-    return el;
-  };
-}
-
-// src/components/card.ts
-import { resolveChildren as resolveChildren5 } from "@vertz/ui";
-function createCardComponents(cardStyles) {
-  function Card({ className, class: classProp, children }) {
-    const effectiveClass = className ?? classProp;
-    const el = document.createElement("div");
-    el.className = [cardStyles.root, effectiveClass].filter(Boolean).join(" ");
-    for (const node of resolveChildren5(children)) {
-      el.appendChild(node);
-    }
-    return el;
-  }
-  function CardHeader({ className, class: classProp, children }) {
-    const effectiveClass = className ?? classProp;
-    const el = document.createElement("div");
-    el.className = [cardStyles.header, effectiveClass].filter(Boolean).join(" ");
-    for (const node of resolveChildren5(children)) {
-      el.appendChild(node);
-    }
-    return el;
-  }
-  function CardTitle({ className, class: classProp, children }) {
-    const effectiveClass = className ?? classProp;
-    const el = document.createElement("h3");
-    el.className = [cardStyles.title, effectiveClass].filter(Boolean).join(" ");
-    for (const node of resolveChildren5(children)) {
-      el.appendChild(node);
-    }
-    return el;
-  }
-  function CardDescription({
-    className,
-    class: classProp,
-    children
-  }) {
-    const effectiveClass = className ?? classProp;
-    const el = document.createElement("p");
-    el.className = [cardStyles.description, effectiveClass].filter(Boolean).join(" ");
-    for (const node of resolveChildren5(children)) {
-      el.appendChild(node);
-    }
-    return el;
-  }
-  function CardContent({ className, class: classProp, children }) {
-    const effectiveClass = className ?? classProp;
-    const el = document.createElement("div");
-    el.className = [cardStyles.content, effectiveClass].filter(Boolean).join(" ");
-    for (const node of resolveChildren5(children)) {
-      el.appendChild(node);
-    }
-    return el;
-  }
-  function CardFooter({ className, class: classProp, children }) {
-    const effectiveClass = className ?? classProp;
-    const el = document.createElement("div");
-    el.className = [cardStyles.footer, effectiveClass].filter(Boolean).join(" ");
-    for (const node of resolveChildren5(children)) {
-      el.appendChild(node);
-    }
-    return el;
-  }
-  function CardAction({ className, class: classProp, children }) {
-    const effectiveClass = className ?? classProp;
-    const el = document.createElement("div");
-    el.className = [cardStyles.action, effectiveClass].filter(Boolean).join(" ");
-    for (const node of resolveChildren5(children)) {
-      el.appendChild(node);
-    }
-    return el;
-  }
-  return {
-    Card,
-    CardHeader,
-    CardTitle,
-    CardDescription,
-    CardContent,
-    CardFooter,
-    CardAction
-  };
-}
-
-// src/components/form-group.ts
-import { resolveChildren as resolveChildren6 } from "@vertz/ui";
-function createFormGroupComponents(formGroupStyles) {
-  function FormGroup({ className, class: classProp, children }) {
-    const effectiveClass = className ?? classProp;
-    const el = document.createElement("div");
-    el.className = [formGroupStyles.base, effectiveClass].filter(Boolean).join(" ");
-    for (const node of resolveChildren6(children)) {
-      el.appendChild(node);
-    }
-    return el;
-  }
-  function FormError({ className, class: classProp, children }) {
-    const effectiveClass = className ?? classProp;
-    const el = document.createElement("span");
-    el.className = [formGroupStyles.error, effectiveClass].filter(Boolean).join(" ");
-    for (const node of resolveChildren6(children)) {
-      el.appendChild(node);
-    }
-    return el;
-  }
-  return {
-    FormGroup,
-    FormError
-  };
-}
-
-// src/components/input.ts
-import { applyProps as applyProps2 } from "@vertz/ui-primitives/utils";
-function createInputComponent(inputStyles) {
-  return function Input({
-    className,
-    class: classProp,
-    name,
-    placeholder,
-    type,
-    disabled,
-    value,
-    ...attrs
-  }) {
-    const effectiveClass = className ?? classProp;
-    const el = document.createElement("input");
-    el.className = [inputStyles.base, effectiveClass].filter(Boolean).join(" ");
-    if (name !== undefined)
-      el.name = name;
-    if (placeholder !== undefined)
-      el.placeholder = placeholder;
-    if (type !== undefined)
-      el.type = type;
-    if (disabled)
-      el.disabled = true;
-    if (value !== undefined)
-      el.value = value;
-    applyProps2(el, attrs);
-    return el;
-  };
-}
-
-// src/components/label.ts
-import { resolveChildren as resolveChildren7 } from "@vertz/ui";
-function createLabelComponent(labelStyles) {
-  return function Label({
-    className,
-    class: classProp,
-    for: htmlFor,
-    children
-  }) {
-    const effectiveClass = className ?? classProp;
-    const el = document.createElement("label");
-    el.className = [labelStyles.base, effectiveClass].filter(Boolean).join(" ");
-    if (htmlFor !== undefined)
-      el.htmlFor = htmlFor;
-    for (const node of resolveChildren7(children)) {
-      el.appendChild(node);
-    }
-    return el;
-  };
-}
-
-// src/components/pagination.ts
-function createPaginationComponent(styles) {
-  return function Pagination(props) {
-    const {
-      currentPage,
-      totalPages,
-      onPageChange,
-      siblingCount = 1,
-      className,
-      class: classProp
-    } = props;
-    const effectiveClass = className ?? classProp;
-    const nav = document.createElement("nav");
-    nav.setAttribute("aria-label", "Pagination");
-    if (styles.nav)
-      nav.classList.add(styles.nav);
-    if (effectiveClass)
-      nav.classList.add(effectiveClass);
-    const ul = document.createElement("ul");
-    ul.classList.add(styles.list);
-    const prevLi = document.createElement("li");
-    prevLi.classList.add(styles.item);
-    const prevBtn = document.createElement("button");
-    prevBtn.setAttribute("type", "button");
-    prevBtn.classList.add(styles.navButton);
-    prevBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg><span>Previous</span>';
-    prevBtn.style.paddingLeft = "0.375rem";
-    prevBtn.style.paddingRight = "0.625rem";
-    prevBtn.setAttribute("aria-label", "Previous page");
-    if (currentPage <= 1) {
-      prevBtn.disabled = true;
-    } else {
-      prevBtn.addEventListener("click", () => onPageChange(currentPage - 1));
-    }
-    prevLi.appendChild(prevBtn);
-    ul.appendChild(prevLi);
-    const range = generatePaginationRange(currentPage, totalPages, siblingCount);
-    for (const page of range) {
-      const li = document.createElement("li");
-      li.classList.add(styles.item);
-      if (page === "...") {
-        const span = document.createElement("span");
-        span.setAttribute("aria-hidden", "true");
-        span.classList.add(styles.ellipsis);
-        span.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>';
-        li.appendChild(span);
-      } else {
-        const btn = document.createElement("button");
-        btn.setAttribute("type", "button");
-        btn.textContent = String(page);
-        if (page === currentPage) {
-          btn.classList.add(styles.linkActive);
-          btn.setAttribute("aria-current", "page");
-        } else {
-          btn.classList.add(styles.link);
-          btn.addEventListener("click", () => onPageChange(page));
-        }
-        li.appendChild(btn);
-      }
-      ul.appendChild(li);
-    }
-    const nextLi = document.createElement("li");
-    nextLi.classList.add(styles.item);
-    const nextBtn = document.createElement("button");
-    nextBtn.setAttribute("type", "button");
-    nextBtn.classList.add(styles.navButton);
-    nextBtn.innerHTML = '<span>Next</span><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg>';
-    nextBtn.style.paddingLeft = "0.625rem";
-    nextBtn.style.paddingRight = "0.375rem";
-    nextBtn.setAttribute("aria-label", "Next page");
-    if (currentPage >= totalPages) {
-      nextBtn.disabled = true;
-    } else {
-      nextBtn.addEventListener("click", () => onPageChange(currentPage + 1));
-    }
-    nextLi.appendChild(nextBtn);
-    ul.appendChild(nextLi);
-    nav.appendChild(ul);
-    return nav;
-  };
-}
-function generatePaginationRange(current, total, siblings) {
-  const range = [];
-  const left = Math.max(2, current - siblings);
-  const right = Math.min(total - 1, current + siblings);
-  range.push(1);
-  if (left > 2) {
-    range.push("...");
-  }
-  for (let i = left;i <= right; i++) {
-    if (i !== 1 && i !== total) {
-      range.push(i);
-    }
-  }
-  if (right < total - 1) {
-    range.push("...");
-  }
-  if (total > 1) {
-    range.push(total);
-  }
-  return range;
-}
+  RADIUS_VALUES,
+  configureThemeBase,
+  palettes
+} from "./shared/chunk-f0wk9320.js";
+// src/configure.ts
+import {
+  ComposedAlert,
+  ComposedAvatar,
+  ComposedBadge,
+  ComposedBreadcrumb,
+  ComposedButton,
+  ComposedCard,
+  ComposedEmptyState,
+  ComposedFormGroup,
+  ComposedInput,
+  ComposedLabel,
+  ComposedPagination,
+  ComposedSeparator,
+  ComposedSkeleton,
+  ComposedTable,
+  ComposedTextarea,
+  withStyles as withStyles18
+} from "@vertz/ui-primitives";
 
 // src/components/primitives/accordion.ts
 import { ComposedAccordion, withStyles } from "@vertz/ui-primitives";
@@ -479,25 +49,10 @@ function createThemedAccordion(styles) {
   });
 }
 
-// src/components/primitives/alert-dialog.ts
-import { ComposedAlertDialog, withStyles as withStyles2 } from "@vertz/ui-primitives";
-function createThemedAlertDialog(styles) {
-  return withStyles2(ComposedAlertDialog, {
-    overlay: styles.overlay,
-    content: styles.panel,
-    cancel: styles.cancel,
-    action: styles.action,
-    title: styles.title,
-    description: styles.description,
-    footer: styles.footer,
-    header: ""
-  });
-}
-
 // src/components/primitives/calendar.ts
-import { ComposedCalendar, withStyles as withStyles3 } from "@vertz/ui-primitives";
+import { ComposedCalendar, withStyles as withStyles2 } from "@vertz/ui-primitives";
 function createThemedCalendar(styles) {
-  const StyledCalendar = withStyles3(ComposedCalendar, {
+  const StyledCalendar = withStyles2(ComposedCalendar, {
     root: styles.root,
     header: styles.header,
     title: styles.title,
@@ -515,9 +70,9 @@ function createThemedCalendar(styles) {
 }
 
 // src/components/primitives/carousel.ts
-import { ComposedCarousel, withStyles as withStyles4 } from "@vertz/ui-primitives";
+import { ComposedCarousel, withStyles as withStyles3 } from "@vertz/ui-primitives";
 function createThemedCarousel(styles) {
-  const StyledCarousel = withStyles4(ComposedCarousel, {
+  const StyledCarousel = withStyles3(ComposedCarousel, {
     root: styles.root,
     viewport: styles.viewport,
     slide: styles.slide,
@@ -547,9 +102,9 @@ function createThemedCarousel(styles) {
 }
 
 // src/components/primitives/checkbox.ts
-import { ComposedCheckbox, withStyles as withStyles5 } from "@vertz/ui-primitives";
+import { ComposedCheckbox, withStyles as withStyles4 } from "@vertz/ui-primitives";
 function createThemedCheckbox(styles) {
-  const StyledCheckbox = withStyles5(ComposedCheckbox, {
+  const StyledCheckbox = withStyles4(ComposedCheckbox, {
     root: styles.root,
     indicator: styles.indicator
   });
@@ -584,9 +139,9 @@ function createThemedCollapsible(styles) {
 }
 
 // src/components/primitives/command.tsx
-import { ComposedCommand, withStyles as withStyles6 } from "@vertz/ui-primitives";
+import { ComposedCommand, withStyles as withStyles5 } from "@vertz/ui-primitives";
 function createThemedCommand(styles) {
-  const Styled = withStyles6(ComposedCommand, {
+  const Styled = withStyles5(ComposedCommand, {
     root: styles.root,
     input: styles.input,
     list: styles.list,
@@ -622,9 +177,9 @@ function createThemedCommand(styles) {
 }
 
 // src/components/primitives/context-menu.ts
-import { ComposedContextMenu, withStyles as withStyles7 } from "@vertz/ui-primitives";
+import { ComposedContextMenu, withStyles as withStyles6 } from "@vertz/ui-primitives";
 function createThemedContextMenu(styles) {
-  const Styled = withStyles7(ComposedContextMenu, {
+  const Styled = withStyles6(ComposedContextMenu, {
     content: styles.content,
     item: styles.item,
     group: styles.group,
@@ -688,22 +243,30 @@ function createThemedDatePicker(styles, calendarClasses) {
 }
 
 // src/components/primitives/dialog.ts
-import { ComposedDialog, withStyles as withStyles8 } from "@vertz/ui-primitives";
-function createThemedDialog(styles) {
-  return withStyles8(ComposedDialog, {
-    overlay: styles.overlay,
-    content: styles.panel,
-    close: styles.close,
-    header: styles.header,
-    title: styles.title,
-    description: styles.description,
-    footer: styles.footer
-  });
+import {
+  StackDialogBody,
+  StackDialogCancel,
+  StackDialogClose,
+  StackDialogDescription,
+  StackDialogFooter,
+  StackDialogHeader,
+  StackDialogTitle
+} from "@vertz/ui-primitives";
+function createThemedDialog() {
+  return {
+    Header: StackDialogHeader,
+    Title: StackDialogTitle,
+    Description: StackDialogDescription,
+    Footer: StackDialogFooter,
+    Body: StackDialogBody,
+    Close: StackDialogClose,
+    Cancel: StackDialogCancel
+  };
 }
 
 // src/components/primitives/drawer.tsx
 import { __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __insert, __pushMountFrame } from "@vertz/ui/internals";
-import { resolveChildren as resolveChildren8 } from "@vertz/ui";
+import { resolveChildren } from "@vertz/ui";
 import { ComposedSheet } from "@vertz/ui-primitives";
 var PANEL_CLASS_MAP = {
   left: "panelLeft",
@@ -732,7 +295,7 @@ function createThemedDrawer(styles) {
     }, DrawerHeader = function({ children, className: cls, class: classProp }) {
       const effectiveCls = cls ?? classProp;
       const combined = [styles.header, effectiveCls].filter(Boolean).join(" ");
-      const resolved = resolveChildren8(children);
+      const resolved = resolveChildren(children);
       return (() => {
         const __el0 = __element("div");
         __el0.setAttribute("data-slot", "drawer-header");
@@ -749,7 +312,7 @@ function createThemedDrawer(styles) {
     }, DrawerFooter = function({ children, className: cls, class: classProp }) {
       const effectiveCls = cls ?? classProp;
       const combined = [styles.footer, effectiveCls].filter(Boolean).join(" ");
-      const resolved = resolveChildren8(children);
+      const resolved = resolveChildren(children);
       return (() => {
         const __el1 = __element("div");
         __el1.setAttribute("data-slot", "drawer-footer");
@@ -795,9 +358,9 @@ function createThemedDrawer(styles) {
 }
 
 // src/components/primitives/dropdown-menu.ts
-import { ComposedDropdownMenu, withStyles as withStyles9 } from "@vertz/ui-primitives";
+import { ComposedDropdownMenu, withStyles as withStyles7 } from "@vertz/ui-primitives";
 function createThemedDropdownMenu(styles) {
-  const Styled = withStyles9(ComposedDropdownMenu, {
+  const Styled = withStyles7(ComposedDropdownMenu, {
     content: styles.content,
     item: styles.item,
     group: styles.group,
@@ -848,9 +411,9 @@ function createThemedHoverCard(styles) {
 }
 
 // src/components/primitives/menubar.ts
-import { ComposedMenubar, withStyles as withStyles10 } from "@vertz/ui-primitives";
+import { ComposedMenubar, withStyles as withStyles8 } from "@vertz/ui-primitives";
 function createThemedMenubar(styles) {
-  const Styled = withStyles10(ComposedMenubar, {
+  const Styled = withStyles8(ComposedMenubar, {
     root: styles.root,
     trigger: styles.trigger,
     content: styles.content,
@@ -874,9 +437,9 @@ function createThemedMenubar(styles) {
 }
 
 // src/components/primitives/navigation-menu.tsx
-import { ComposedNavigationMenu, withStyles as withStyles11 } from "@vertz/ui-primitives";
+import { ComposedNavigationMenu, withStyles as withStyles9 } from "@vertz/ui-primitives";
 function createThemedNavigationMenu(styles) {
-  const Styled = withStyles11(ComposedNavigationMenu, {
+  const Styled = withStyles9(ComposedNavigationMenu, {
     root: styles.root,
     list: styles.list,
     trigger: styles.trigger,
@@ -908,9 +471,9 @@ function createThemedNavigationMenu(styles) {
 }
 
 // src/components/primitives/popover.ts
-import { ComposedPopover, withStyles as withStyles12 } from "@vertz/ui-primitives";
+import { ComposedPopover, withStyles as withStyles10 } from "@vertz/ui-primitives";
 function createThemedPopover(styles) {
-  const StyledPopover = withStyles12(ComposedPopover, {
+  const StyledPopover = withStyles10(ComposedPopover, {
     content: styles.content
   });
   function PopoverRoot({ children, onOpenChange }) {
@@ -934,9 +497,9 @@ function createThemedProgress(styles) {
 }
 
 // src/components/primitives/radio-group.ts
-import { ComposedRadioGroup, withStyles as withStyles13 } from "@vertz/ui-primitives";
+import { ComposedRadioGroup, withStyles as withStyles11 } from "@vertz/ui-primitives";
 function createThemedRadioGroup(styles) {
-  const StyledRadioGroup = withStyles13(ComposedRadioGroup, {
+  const StyledRadioGroup = withStyles11(ComposedRadioGroup, {
     root: styles.root,
     item: styles.item,
     indicator: styles.indicator,
@@ -994,9 +557,9 @@ function createThemedScrollArea(styles) {
 }
 
 // src/components/primitives/select.ts
-import { ComposedSelect, withStyles as withStyles14 } from "@vertz/ui-primitives";
+import { ComposedSelect, withStyles as withStyles12 } from "@vertz/ui-primitives";
 function createThemedSelect(styles) {
-  const StyledSelect = withStyles14(ComposedSelect, {
+  const StyledSelect = withStyles12(ComposedSelect, {
     trigger: styles.trigger,
     content: styles.content,
     item: styles.item,
@@ -1078,13 +641,13 @@ function createThemedSlider(styles) {
 }
 
 // src/components/primitives/switch.ts
-import { ComposedSwitch, withStyles as withStyles15 } from "@vertz/ui-primitives";
+import { ComposedSwitch, withStyles as withStyles13 } from "@vertz/ui-primitives";
 function createThemedSwitch(styles) {
-  const DefaultSwitch = withStyles15(ComposedSwitch, {
+  const DefaultSwitch = withStyles13(ComposedSwitch, {
     root: styles.root,
     thumb: styles.thumb
   });
-  const SmSwitch = withStyles15(ComposedSwitch, {
+  const SmSwitch = withStyles13(ComposedSwitch, {
     root: styles.rootSm,
     thumb: styles.thumbSm
   });
@@ -1095,14 +658,14 @@ function createThemedSwitch(styles) {
 }
 
 // src/components/primitives/tabs.ts
-import { ComposedTabs, withStyles as withStyles16 } from "@vertz/ui-primitives";
+import { ComposedTabs, withStyles as withStyles14 } from "@vertz/ui-primitives";
 function createThemedTabs(styles) {
-  const DefaultTabs = withStyles16(ComposedTabs, {
+  const DefaultTabs = withStyles14(ComposedTabs, {
     list: styles.list,
     trigger: styles.trigger,
     panel: styles.panel
   });
-  const LineTabs = withStyles16(ComposedTabs, {
+  const LineTabs = withStyles14(ComposedTabs, {
     list: styles.listLine,
     trigger: styles.triggerLine,
     panel: styles.panel
@@ -1135,9 +698,9 @@ function createThemedToast(styles) {
 }
 
 // src/components/primitives/toggle.ts
-import { ComposedToggle, withStyles as withStyles17 } from "@vertz/ui-primitives";
+import { ComposedToggle, withStyles as withStyles15 } from "@vertz/ui-primitives";
 function createThemedToggle(styles) {
-  const StyledToggle = withStyles17(ComposedToggle, {
+  const StyledToggle = withStyles15(ComposedToggle, {
     root: styles.root
   });
   return function ToggleRoot(props) {
@@ -1146,9 +709,9 @@ function createThemedToggle(styles) {
 }
 
 // src/components/primitives/toggle-group.tsx
-import { ComposedToggleGroup, withStyles as withStyles18 } from "@vertz/ui-primitives";
+import { ComposedToggleGroup, withStyles as withStyles16 } from "@vertz/ui-primitives";
 function createThemedToggleGroup(styles) {
-  const StyledToggleGroup = withStyles18(ComposedToggleGroup, {
+  const StyledToggleGroup = withStyles16(ComposedToggleGroup, {
     root: styles.root,
     item: styles.item
   });
@@ -1161,9 +724,9 @@ function createThemedToggleGroup(styles) {
 }
 
 // src/components/primitives/tooltip.ts
-import { ComposedTooltip, withStyles as withStyles19 } from "@vertz/ui-primitives";
+import { ComposedTooltip, withStyles as withStyles17 } from "@vertz/ui-primitives";
 function createThemedTooltip(styles) {
-  const StyledTooltip = withStyles19(ComposedTooltip, {
+  const StyledTooltip = withStyles17(ComposedTooltip, {
     content: styles.content
   });
   function TooltipRoot({ children, delay }) {
@@ -1175,185 +738,6 @@ function createThemedTooltip(styles) {
   });
 }
 
-// src/components/separator.ts
-function createSeparatorComponent(separatorStyles) {
-  return function Separator({
-    orientation = "horizontal",
-    className,
-    class: classProp
-  }) {
-    const effectiveClass = className ?? classProp;
-    const orientationClass = orientation === "vertical" ? separatorStyles.vertical : separatorStyles.horizontal;
-    const el = document.createElement("hr");
-    el.className = [separatorStyles.base, orientationClass, effectiveClass].filter(Boolean).join(" ");
-    el.setAttribute("role", "separator");
-    el.setAttribute("aria-orientation", orientation);
-    return el;
-  };
-}
-
-// src/components/skeleton.ts
-function createSkeletonComponents(skeletonStyles) {
-  function Skeleton({
-    className,
-    class: classProp,
-    width,
-    height
-  } = {}) {
-    const effectiveClass = className ?? classProp;
-    const el = document.createElement("div");
-    el.className = [skeletonStyles.base, effectiveClass].filter(Boolean).join(" ");
-    el.setAttribute("aria-hidden", "true");
-    if (width)
-      el.style.width = width;
-    if (height)
-      el.style.height = height;
-    return el;
-  }
-  return { Skeleton };
-}
-
-// src/components/table.ts
-import { resolveChildren as resolveChildren9 } from "@vertz/ui";
-function createTableComponents(tableStyles) {
-  function Table({ className, class: classProp, children }) {
-    const effectiveClass = className ?? classProp;
-    const wrapper = document.createElement("div");
-    wrapper.style.position = "relative";
-    wrapper.style.width = "100%";
-    wrapper.style.overflowX = "auto";
-    const table = document.createElement("table");
-    table.style.borderCollapse = "collapse";
-    table.className = [tableStyles.root, effectiveClass].filter(Boolean).join(" ");
-    for (const node of resolveChildren9(children)) {
-      table.appendChild(node);
-    }
-    wrapper.appendChild(table);
-    return wrapper;
-  }
-  function TableHeader({
-    className,
-    class: classProp,
-    children
-  }) {
-    const effectiveClass = className ?? classProp;
-    const el = document.createElement("thead");
-    el.className = [tableStyles.header, effectiveClass].filter(Boolean).join(" ");
-    for (const node of resolveChildren9(children)) {
-      el.appendChild(node);
-    }
-    return el;
-  }
-  function TableBody({
-    className,
-    class: classProp,
-    children
-  }) {
-    const effectiveClass = className ?? classProp;
-    const el = document.createElement("tbody");
-    el.className = [tableStyles.body, effectiveClass].filter(Boolean).join(" ");
-    for (const node of resolveChildren9(children)) {
-      el.appendChild(node);
-    }
-    return el;
-  }
-  function TableRow({ className, class: classProp, children }) {
-    const effectiveClass = className ?? classProp;
-    const el = document.createElement("tr");
-    el.className = [tableStyles.row, effectiveClass].filter(Boolean).join(" ");
-    for (const node of resolveChildren9(children)) {
-      el.appendChild(node);
-    }
-    return el;
-  }
-  function TableHead({ className, class: classProp, children }) {
-    const effectiveClass = className ?? classProp;
-    const el = document.createElement("th");
-    el.scope = "col";
-    el.className = [tableStyles.head, effectiveClass].filter(Boolean).join(" ");
-    for (const node of resolveChildren9(children)) {
-      el.appendChild(node);
-    }
-    return el;
-  }
-  function TableCell({ className, class: classProp, children }) {
-    const effectiveClass = className ?? classProp;
-    const el = document.createElement("td");
-    el.className = [tableStyles.cell, effectiveClass].filter(Boolean).join(" ");
-    for (const node of resolveChildren9(children)) {
-      el.appendChild(node);
-    }
-    return el;
-  }
-  function TableCaption({
-    className,
-    class: classProp,
-    children
-  }) {
-    const effectiveClass = className ?? classProp;
-    const el = document.createElement("caption");
-    el.className = [tableStyles.caption, effectiveClass].filter(Boolean).join(" ");
-    for (const node of resolveChildren9(children)) {
-      el.appendChild(node);
-    }
-    return el;
-  }
-  function TableFooter({
-    className,
-    class: classProp,
-    children
-  }) {
-    const effectiveClass = className ?? classProp;
-    const el = document.createElement("tfoot");
-    el.className = [tableStyles.footer, effectiveClass].filter(Boolean).join(" ");
-    for (const node of resolveChildren9(children)) {
-      el.appendChild(node);
-    }
-    return el;
-  }
-  return {
-    Table,
-    TableHeader,
-    TableBody,
-    TableRow,
-    TableHead,
-    TableCell,
-    TableCaption,
-    TableFooter
-  };
-}
-
-// src/components/textarea.ts
-import { applyProps as applyProps3 } from "@vertz/ui-primitives/utils";
-function createTextareaComponent(textareaStyles) {
-  return function Textarea({
-    className,
-    class: classProp,
-    name,
-    placeholder,
-    disabled,
-    value,
-    rows,
-    ...attrs
-  }) {
-    const effectiveClass = className ?? classProp;
-    const el = document.createElement("textarea");
-    el.className = [textareaStyles.base, effectiveClass].filter(Boolean).join(" ");
-    if (name !== undefined)
-      el.name = name;
-    if (placeholder !== undefined)
-      el.placeholder = placeholder;
-    if (disabled)
-      el.disabled = true;
-    if (value !== undefined)
-      el.value = value;
-    if (rows !== undefined)
-      el.rows = rows;
-    applyProps3(el, attrs);
-    return el;
-  };
-}
-
 // src/styles/accordion.ts
 import { css, keyframes } from "@vertz/ui";
 var accordionDown = keyframes("vz-accordion-down", {
@@ -1375,10 +759,13 @@ function createAccordionStyles() {
       "px:2",
       "text:sm",
       "font:medium",
+      "text:foreground",
       "cursor:pointer",
+      "bg:transparent",
       {
         "&": {
-          "border-radius": "0.5rem",
+          border: "none",
+          "border-radius": "calc(var(--radius) * 1.33)",
           "padding-top": "0.625rem",
           "padding-bottom": "0.625rem"
         },
@@ -1388,6 +775,7 @@ function createAccordionStyles() {
     accordionContent: [
       "overflow-hidden",
       "text:sm",
+      "text:muted-foreground",
       {
         '&[data-state="open"]': [animationDecl(`${accordionDown} 200ms ease-out forwards`)]
       },
@@ -1437,151 +825,10 @@ function createAlertStyles() {
     css: s.css
   };
 }
-// src/styles/alert-dialog.ts
-import { css as css3 } from "@vertz/ui";
-var focusRing = {
-  "&:focus-visible": [
-    "outline-none",
-    {
-      outline: "3px solid color-mix(in oklch, var(--color-ring) 50%, transparent)"
-    },
-    { "outline-offset": "2px" }
-  ]
-};
-function createAlertDialogStyles() {
-  const s = css3({
-    alertDialogOverlay: [
-      "fixed",
-      "inset:0",
-      "z:50",
-      {
-        "&": {
-          "background-color": "oklch(0 0 0 / 10%)",
-          "backdrop-filter": "blur(4px)",
-          "-webkit-backdrop-filter": "blur(4px)"
-        }
-      },
-      {
-        '&[data-state="open"]': [animationDecl("vz-fade-in 100ms ease-out forwards")]
-      },
-      {
-        '&[data-state="closed"]': [animationDecl("vz-fade-out 100ms ease-out forwards")]
-      }
-    ],
-    alertDialogPanel: [
-      "bg:background",
-      "gap:4",
-      {
-        "&": {
-          display: "grid",
-          width: "100%",
-          "max-width": "calc(100% - 2rem)",
-          "box-shadow": "0 0 0 1px color-mix(in oklch, var(--color-foreground) 10%, transparent)",
-          "border-radius": "0.75rem",
-          padding: "1rem",
-          margin: "auto",
-          height: "fit-content",
-          outline: "none",
-          border: "none",
-          "container-type": "inline-size"
-        },
-        '&:not([open]):not([data-state="open"])': { display: "none" },
-        "&::backdrop": {
-          "background-color": "oklch(0 0 0 / 10%)",
-          "backdrop-filter": "blur(4px)",
-          "-webkit-backdrop-filter": "blur(4px)"
-        },
-        '&[data-state="open"]::backdrop': {
-          animation: "vz-fade-in 100ms ease-out forwards"
-        },
-        '&[data-state="closed"]::backdrop': {
-          animation: "vz-fade-out 100ms ease-out forwards"
-        },
-        "@media (min-width: 640px)": { "max-width": "24rem" }
-      },
-      {
-        '&[data-state="open"]': [animationDecl("vz-zoom-in 100ms ease-out forwards")]
-      },
-      {
-        '&[data-state="closed"]': [animationDecl("vz-zoom-out 100ms ease-out forwards")]
-      }
-    ],
-    alertDialogTitle: [
-      {
-        "&": {
-          "font-size": "1rem",
-          "font-weight": "500"
-        }
-      }
-    ],
-    alertDialogDescription: ["text:sm", "text:muted-foreground"],
-    alertDialogFooter: [
-      "flex",
-      "gap:2",
-      {
-        "&": {
-          "flex-direction": "column-reverse",
-          "background-color": "color-mix(in oklch, var(--color-muted) 50%, transparent)",
-          margin: "0 -1rem -1rem -1rem",
-          "border-radius": "0 0 0.75rem 0.75rem",
-          "border-top": "1px solid var(--color-border)",
-          padding: "1rem"
-        },
-        "@container (min-width: 20rem)": {
-          "flex-direction": "row",
-          "justify-content": "flex-end"
-        }
-      }
-    ],
-    alertDialogCancel: [
-      "inline-flex",
-      "items:center",
-      "justify:center",
-      "rounded:md",
-      "border:1",
-      "border:input",
-      "bg:background",
-      "px:4",
-      "py:2",
-      "text:sm",
-      "font:medium",
-      "cursor:pointer",
-      "transition:colors",
-      { "&:hover": ["bg:accent", "text:accent-foreground"] },
-      focusRing
-    ],
-    alertDialogAction: [
-      "inline-flex",
-      "items:center",
-      "justify:center",
-      "rounded:md",
-      "bg:primary",
-      "text:primary-foreground",
-      "px:4",
-      "py:2",
-      "text:sm",
-      "font:medium",
-      "cursor:pointer",
-      "transition:colors",
-      { "&:hover": [{ opacity: "0.9" }] },
-      focusRing
-    ]
-  });
-  return {
-    overlay: s.alertDialogOverlay,
-    panel: s.alertDialogPanel,
-    title: s.alertDialogTitle,
-    description: s.alertDialogDescription,
-    footer: s.alertDialogFooter,
-    cancel: s.alertDialogCancel,
-    action: s.alertDialogAction,
-    css: s.css
-  };
-}
 // src/styles/avatar.ts
-import { css as css4 } from "@vertz/ui";
+import { css as css3 } from "@vertz/ui";
 function createAvatarStyles() {
-  const s = css4({
+  const s = css3({
     avatarRoot: ["relative", "flex", "h:8", "w:8", "shrink-0", "overflow-hidden", "rounded:full"],
     avatarImage: [
       "h:full",
@@ -1626,9 +873,9 @@ function createAvatarStyles() {
   };
 }
 // src/styles/breadcrumb.ts
-import { css as css5 } from "@vertz/ui";
+import { css as css4 } from "@vertz/ui";
 function createBreadcrumbStyles() {
-  const s = css5({
+  const s = css4({
     breadcrumbNav: [],
     breadcrumbList: [
       "flex",
@@ -1645,7 +892,12 @@ function createBreadcrumbStyles() {
         }
       }
     ],
-    breadcrumbItem: ["inline-flex", "items:center", "gap:1.5"],
+    breadcrumbItem: [
+      "inline-flex",
+      "items:center",
+      "gap:1.5",
+      { '&:first-child > [role="presentation"]': { display: "none" } }
+    ],
     breadcrumbLink: ["transition:colors", "text:foreground", { "&:hover": ["text:foreground"] }],
     breadcrumbPage: ["font:normal", "text:foreground"],
     breadcrumbSeparator: []
@@ -1661,8 +913,8 @@ function createBreadcrumbStyles() {
   };
 }
 // src/styles/calendar.ts
-import { css as css6 } from "@vertz/ui";
-var focusRing2 = {
+import { css as css5 } from "@vertz/ui";
+var focusRing = {
   "&:focus-visible": [
     "outline-none",
     {
@@ -1672,10 +924,11 @@ var focusRing2 = {
   ]
 };
 function createCalendarStyles() {
-  const s = css6({
+  const s = css5({
     calendarRoot: [
       "w:fit",
       "bg:background",
+      "text:foreground",
       "rounded:lg",
       "border:1",
       "border:border",
@@ -1685,6 +938,17 @@ function createCalendarStyles() {
         }
       }
     ],
+    calendarRootNoBorder: [
+      "w:fit",
+      "bg:background",
+      "text:foreground",
+      "rounded:md",
+      {
+        "&": {
+          padding: "0.5rem"
+        }
+      }
+    ],
     calendarHeader: [
       "flex",
       "items:center",
@@ -1728,7 +992,7 @@ function createCalendarStyles() {
       "cursor:pointer",
       "transition:all",
       { "&:hover": ["bg:muted", "text:foreground"] },
-      focusRing2,
+      focusRing,
       {
         "&": {
           height: "1.75rem",
@@ -1784,7 +1048,7 @@ function createCalendarStyles() {
       "bg:transparent",
       "cursor:pointer",
       "transition:all",
-      focusRing2,
+      focusRing,
       {
         "&": {
           height: "1.75rem",
@@ -1814,7 +1078,7 @@ function createCalendarStyles() {
       "font:medium",
       "bg:transparent",
       "cursor:pointer",
-      focusRing2,
+      focusRing,
       {
         "&": {
           border: "none",
@@ -1828,7 +1092,7 @@ function createCalendarStyles() {
       "font:medium",
       "bg:transparent",
       "cursor:pointer",
-      focusRing2,
+      focusRing,
       {
         "&": {
           border: "none",
@@ -1840,6 +1104,7 @@ function createCalendarStyles() {
   });
   return {
     root: s.calendarRoot,
+    rootNoBorder: s.calendarRootNoBorder,
     header: s.calendarHeader,
     title: s.calendarTitle,
     navButton: s.calendarNavButton,
@@ -1853,9 +1118,9 @@ function createCalendarStyles() {
   };
 }
 // src/styles/card.ts
-import { css as css7 } from "@vertz/ui";
+import { css as css6 } from "@vertz/ui";
 function createCard() {
-  const s = css7({
+  const s = css6({
     cardRoot: [
       "flex",
       "flex-col",
@@ -1867,7 +1132,7 @@ function createCard() {
       "text:sm",
       {
         "&": {
-          "border-radius": "0.75rem",
+          "border-radius": "calc(var(--radius) * 2)",
           "box-shadow": "0 0 0 1px color-mix(in oklch, var(--color-foreground) 10%, transparent)"
         }
       }
@@ -1894,7 +1159,7 @@ function createCard() {
       {
         "&": {
           "background-color": "color-mix(in oklch, var(--color-muted) 50%, transparent)",
-          "border-radius": "0 0 0.75rem 0.75rem",
+          "border-radius": "0 0 calc(var(--radius) * 2) calc(var(--radius) * 2)",
           "margin-bottom": "-1rem"
         }
       }
@@ -1913,14 +1178,12 @@ function createCard() {
   };
 }
 // src/styles/carousel.ts
-import { css as css8 } from "@vertz/ui";
+import { css as css7 } from "@vertz/ui";
 function createCarouselStyles() {
-  const s = css8({
+  const s = css7({
     carouselRoot: ["relative"],
     carouselViewport: ["overflow-hidden"],
-    carouselSlide: [
-      { '&[data-state="inactive"]': [{ display: "none" }] }
-    ],
+    carouselSlide: [{ '&[data-state="inactive"]': [{ display: "none" }] }],
     carouselPrevButton: [
       "absolute",
       "h:8",
@@ -1929,6 +1192,7 @@ function createCarouselStyles() {
       "border:1",
       "border:border",
       "bg:background",
+      "text:foreground",
       "inline-flex",
       "items:center",
       "justify:center",
@@ -1951,6 +1215,7 @@ function createCarouselStyles() {
       "border:1",
       "border:border",
       "bg:background",
+      "text:foreground",
       "inline-flex",
       "items:center",
       "justify:center",
@@ -1976,8 +1241,8 @@ function createCarouselStyles() {
   };
 }
 // src/styles/checkbox.ts
-import { css as css9 } from "@vertz/ui";
-var focusRing3 = {
+import { css as css8 } from "@vertz/ui";
+var focusRing2 = {
   "&:focus-visible": [
     "outline-none",
     "border:ring",
@@ -1987,7 +1252,7 @@ var focusRing3 = {
   ]
 };
 function createCheckboxStyles() {
-  const s = css9({
+  const s = css8({
     checkboxRoot: [
       "shrink-0",
       "flex",
@@ -1999,9 +1264,9 @@ function createCheckboxStyles() {
       "border:input",
       "cursor:pointer",
       "transition:colors",
-      { "&": { padding: "0", background: "transparent", "border-radius": "4px" } },
+      { "&": { padding: "0", background: "transparent", "border-radius": "calc(var(--radius) * 0.67)" } },
       { [DARK]: [bgOpacity("input", 30)] },
-      focusRing3,
+      focusRing2,
       { "&:disabled": ["pointer-events-none", "opacity:0.5"] },
       {
         '&[data-state="checked"]': ["bg:primary", "text:primary-foreground", "border:primary"],
@@ -2051,9 +1316,9 @@ function createCheckboxStyles() {
   };
 }
 // src/styles/collapsible.ts
-import { css as css10 } from "@vertz/ui";
+import { css as css9 } from "@vertz/ui";
 function createCollapsibleStyles() {
-  const s = css10({
+  const s = css9({
     collapsibleContent: [
       "overflow-hidden",
       "text:sm",
@@ -2071,8 +1336,8 @@ function createCollapsibleStyles() {
   };
 }
 // src/styles/command.ts
-import { css as css11 } from "@vertz/ui";
-var focusRing4 = {
+import { css as css10 } from "@vertz/ui";
+var focusRing3 = {
   "&:focus-visible": [
     "outline-none",
     {
@@ -2082,7 +1347,7 @@ var focusRing4 = {
   ]
 };
 function createCommandStyles() {
-  const s = css11({
+  const s = css10({
     commandRoot: [
       "flex",
       "flex-col",
@@ -2109,7 +1374,7 @@ function createCommandStyles() {
           "border-bottom": "1px solid var(--color-border)"
         }
       },
-      focusRing4
+      focusRing3
     ],
     commandList: [
       "px:1",
@@ -2177,9 +1442,9 @@ function createCommandStyles() {
   };
 }
 // src/styles/context-menu.ts
-import { css as css12 } from "@vertz/ui";
+import { css as css11 } from "@vertz/ui";
 function createContextMenuStyles() {
-  const s = css12({
+  const s = css11({
     cmContent: [
       "z:50",
       "overflow-hidden",
@@ -2239,8 +1504,8 @@ function createContextMenuStyles() {
   };
 }
 // src/styles/date-picker.ts
-import { css as css13 } from "@vertz/ui";
-var focusRing5 = {
+import { css as css12 } from "@vertz/ui";
+var focusRing4 = {
   "&:focus-visible": [
     "outline-none",
     {
@@ -2250,7 +1515,7 @@ var focusRing5 = {
   ]
 };
 function createDatePickerStyles() {
-  const s = css13({
+  const s = css12({
     datePickerTrigger: [
       "inline-flex",
       "items:center",
@@ -2259,11 +1524,12 @@ function createDatePickerStyles() {
       "border:1",
       "border:input",
       "bg:background",
+      "text:foreground",
       "text:sm",
       "font:normal",
       "cursor:pointer",
       "transition:colors",
-      focusRing5,
+      focusRing4,
       {
         "&": {
           height: "2.5rem",
@@ -2281,6 +1547,7 @@ function createDatePickerStyles() {
       "border:1",
       "border:border",
       "shadow:md",
+      "overflow-hidden",
       { "&": { padding: "0" } }
     ]
   });
@@ -2291,8 +1558,8 @@ function createDatePickerStyles() {
   };
 }
 // src/styles/dialog.ts
-import { css as css14 } from "@vertz/ui";
-var focusRing6 = {
+import { css as css13, globalCss, injectCSS } from "@vertz/ui";
+var focusRing5 = {
   "&:focus-visible": [
     "outline-none",
     {
@@ -2302,7 +1569,7 @@ var focusRing6 = {
   ]
 };
 function createDialogStyles() {
-  const s = css14({
+  const s = css13({
     dialogOverlay: [
       "fixed",
       "inset:0",
@@ -2323,6 +1590,7 @@ function createDialogStyles() {
     ],
     dialogPanel: [
       "bg:background",
+      "text:foreground",
       "gap:4",
       {
         "&": {
@@ -2330,7 +1598,7 @@ function createDialogStyles() {
           width: "100%",
           "max-width": "calc(100% - 2rem)",
           "box-shadow": "0 0 0 1px color-mix(in oklch, var(--color-foreground) 10%, transparent)",
-          "border-radius": "0.75rem",
+          "border-radius": "calc(var(--radius) * 2)",
           padding: "1rem",
           "font-size": "0.875rem",
           margin: "auto",
@@ -2369,6 +1637,7 @@ function createDialogStyles() {
       }
     ],
     dialogTitle: [
+      "text:foreground",
       {
         "&": {
           "font-size": "1rem",
@@ -2401,7 +1670,7 @@ function createDialogStyles() {
         "&:hover": { opacity: "1" },
         "&:disabled": { "pointer-events": "none" }
       },
-      focusRing6
+      focusRing5
     ],
     dialogFooter: [
       "flex",
@@ -2411,7 +1680,7 @@ function createDialogStyles() {
           "flex-direction": "column-reverse",
           "background-color": "color-mix(in oklch, var(--color-muted) 50%, transparent)",
           margin: "0 -1rem -1rem -1rem",
-          "border-radius": "0 0 0.75rem 0.75rem",
+          "border-radius": "0 0 calc(var(--radius) * 2) calc(var(--radius) * 2)",
           "border-top": "1px solid var(--color-border)",
           padding: "1rem"
         },
@@ -2433,9 +1702,148 @@ function createDialogStyles() {
     css: s.css
   };
 }
+function createDialogGlobalStyles() {
+  const output = globalCss({
+    "dialog[data-dialog-wrapper]": {
+      background: "transparent",
+      border: "none",
+      padding: "0",
+      maxWidth: "100vw",
+      maxHeight: "100vh",
+      overflow: "visible"
+    },
+    "dialog[data-dialog-wrapper]::backdrop": {
+      backgroundColor: "oklch(0 0 0 / 10%)",
+      backdropFilter: "blur(4px)",
+      WebkitBackdropFilter: "blur(4px)"
+    },
+    'dialog[data-dialog-wrapper][data-state="open"]::backdrop': {
+      animation: "vz-fade-in 100ms ease-out forwards"
+    },
+    'dialog[data-dialog-wrapper][data-state="closed"]::backdrop': {
+      animation: "vz-fade-out 100ms ease-out forwards"
+    },
+    'dialog[data-dialog-wrapper] > [data-part="panel"]': {
+      position: "relative",
+      display: "grid",
+      gap: "1rem",
+      width: "100%",
+      maxWidth: "calc(100% - 2rem)",
+      boxShadow: "0 0 0 1px color-mix(in oklch, var(--color-foreground) 10%, transparent)",
+      borderRadius: "calc(var(--radius) * 2)",
+      padding: "1rem",
+      fontSize: "0.875rem",
+      margin: "auto",
+      height: "fit-content",
+      outline: "none",
+      containerType: "inline-size",
+      backgroundColor: "var(--color-background)"
+    },
+    'dialog[data-dialog-wrapper][data-state="open"] > [data-part="panel"]': {
+      animation: "vz-zoom-in 100ms ease-out forwards"
+    },
+    'dialog[data-dialog-wrapper][data-state="closed"] > [data-part="panel"]': {
+      animation: "vz-zoom-out 100ms ease-out forwards"
+    },
+    'dialog[data-dialog-wrapper] [data-part="header"]': {
+      display: "flex",
+      flexDirection: "column",
+      gap: "0.5rem"
+    },
+    'dialog[data-dialog-wrapper] [data-part="title"]': {
+      fontSize: "1rem",
+      lineHeight: "1",
+      fontWeight: "500"
+    },
+    'dialog[data-dialog-wrapper] [data-part="description"]': {
+      fontSize: "0.875rem",
+      color: "var(--color-muted-foreground)"
+    },
+    'dialog[data-dialog-wrapper] [data-part="body"]': {
+      overflow: "auto"
+    },
+    'dialog[data-dialog-wrapper] [data-part="footer"]': {
+      display: "flex",
+      gap: "0.5rem",
+      flexDirection: "column-reverse",
+      backgroundColor: "color-mix(in oklch, var(--color-muted) 50%, transparent)",
+      margin: "0 -1rem -1rem -1rem",
+      borderRadius: "0 0 calc(var(--radius) * 2) calc(var(--radius) * 2)",
+      borderTop: "1px solid var(--color-border)",
+      padding: "1rem"
+    },
+    'dialog[data-dialog-wrapper] [data-part="close"]': {
+      position: "absolute",
+      top: "0.5rem",
+      right: "0.5rem",
+      opacity: "0.7",
+      transition: "opacity 150ms",
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "1rem",
+      height: "1rem",
+      background: "none",
+      border: "none",
+      color: "currentColor",
+      padding: "0",
+      cursor: "pointer",
+      borderRadius: "calc(var(--radius) * 0.33)"
+    },
+    'dialog[data-dialog-wrapper] [data-part="close"]:hover': {
+      opacity: "1"
+    },
+    'dialog[data-dialog-wrapper] [data-part="cancel"]': {
+      background: "none",
+      border: "1px solid var(--color-border)",
+      borderRadius: "var(--radius)",
+      padding: "0.5rem 1rem",
+      cursor: "pointer",
+      fontSize: "0.875rem",
+      color: "var(--color-foreground)"
+    },
+    'dialog[data-dialog-wrapper] [data-part="confirm-cancel"]': {
+      background: "none",
+      border: "1px solid var(--color-border)",
+      borderRadius: "var(--radius)",
+      padding: "0.5rem 1rem",
+      cursor: "pointer",
+      fontSize: "0.875rem",
+      color: "var(--color-foreground)"
+    },
+    'dialog[data-dialog-wrapper] [data-part="confirm-action"]': {
+      border: "none",
+      borderRadius: "var(--radius)",
+      padding: "0.5rem 1rem",
+      cursor: "pointer",
+      fontSize: "0.875rem",
+      fontWeight: "500",
+      color: "var(--color-primary-foreground)",
+      backgroundColor: "var(--color-primary)"
+    },
+    'dialog[data-dialog-wrapper] [data-part="confirm-action"][data-intent="danger"]': {
+      color: "var(--color-destructive-foreground)",
+      backgroundColor: "var(--color-destructive)"
+    }
+  });
+  injectCSS(`
+@media (min-width: 640px) {
+  dialog[data-dialog-wrapper] > [data-part="panel"] {
+    max-width: 24rem;
+  }
+}
+@container (min-width: 20rem) {
+  dialog[data-dialog-wrapper] [data-part="footer"] {
+    flex-direction: row;
+    justify-content: flex-end;
+  }
+}
+  `.trim());
+  return output;
+}
 // src/styles/drawer.ts
-import { css as css15 } from "@vertz/ui";
-var focusRing7 = {
+import { css as css14 } from "@vertz/ui";
+var focusRing6 = {
   "&:focus-visible": [
     "outline-none",
     {
@@ -2455,7 +1863,7 @@ var PANEL_BASE = [
   "gap:4"
 ];
 function createDrawerStyles() {
-  const s = css15({
+  const s = css14({
     drawerOverlay: [
       "fixed",
       "inset:0",
@@ -2483,7 +1891,7 @@ function createDrawerStyles() {
           margin: "0",
           outline: "none",
           border: "none",
-          "border-radius": "0 0.75rem 0.75rem 0"
+          "border-radius": "0 calc(var(--radius) * 2) calc(var(--radius) * 2) 0"
         },
         '&:not([open]):not([data-state="open"])': { display: "none" },
         "&::backdrop": {
@@ -2516,7 +1924,7 @@ function createDrawerStyles() {
           margin: "0",
           outline: "none",
           border: "none",
-          "border-radius": "0.75rem 0 0 0.75rem"
+          "border-radius": "calc(var(--radius) * 2) 0 0 calc(var(--radius) * 2)"
         },
         '&:not([open]):not([data-state="open"])': { display: "none" },
         "&::backdrop": {
@@ -2547,7 +1955,7 @@ function createDrawerStyles() {
           margin: "0",
           outline: "none",
           border: "none",
-          "border-radius": "0 0 0.75rem 0.75rem"
+          "border-radius": "0 0 calc(var(--radius) * 2) calc(var(--radius) * 2)"
         },
         '&:not([open]):not([data-state="open"])': { display: "none" },
         "&::backdrop": {
@@ -2578,7 +1986,7 @@ function createDrawerStyles() {
           margin: "0",
           outline: "none",
           border: "none",
-          "border-radius": "0.75rem 0.75rem 0 0"
+          "border-radius": "calc(var(--radius) * 2) calc(var(--radius) * 2) 0 0"
         },
         '&:not([open]):not([data-state="open"])': { display: "none" },
         "&::backdrop": {
@@ -2634,7 +2042,7 @@ function createDrawerStyles() {
       "cursor:pointer",
       "transition:colors",
       { "&:hover": ["opacity:1"] },
-      focusRing7
+      focusRing6
     ]
   });
   return {
@@ -2653,9 +2061,9 @@ function createDrawerStyles() {
   };
 }
 // src/styles/dropdown-menu.ts
-import { css as css16 } from "@vertz/ui";
+import { css as css15 } from "@vertz/ui";
 function createDropdownMenuStyles() {
-  const s = css16({
+  const s = css15({
     dmContent: [
       "z:50",
       "overflow-hidden",
@@ -2714,6 +2122,17 @@ function createDropdownMenuStyles() {
     css: s.css
   };
 }
+// src/styles/empty-state.ts
+import { css as css16 } from "@vertz/ui";
+function createEmptyStateStyles() {
+  return css16({
+    root: ["flex", "flex-col", "items:center", "justify:center", "py:12", "text:center"],
+    icon: ["mb:3", "text:muted-foreground"],
+    title: ["font:lg", "font:semibold", "text:foreground", "mb:1"],
+    description: ["text:sm", "text:muted-foreground", "mb:4", "max-w:md"],
+    action: ["mt:2"]
+  });
+}
 // src/styles/form-group.ts
 import { css as css17 } from "@vertz/ui";
 function createFormGroup() {
@@ -2764,7 +2183,7 @@ function createHoverCardStyles() {
 // src/styles/input.ts
 import { css as css19 } from "@vertz/ui";
 function createInput() {
-  const focusRing8 = {
+  const focusRing7 = {
     "&:focus-visible": [
       "outline-none",
       "border:ring",
@@ -2793,7 +2212,7 @@ function createInput() {
       "text:sm",
       "text:foreground",
       "transition:colors",
-      focusRing8,
+      focusRing7,
       { "&:disabled": ["pointer-events-none", "opacity:0.5"] },
       { [DARK]: [bgOpacity("input", 30)] },
       {
@@ -2845,6 +2264,7 @@ function createMenubarStyles() {
       "border:1",
       "border:border",
       "bg:background",
+      "text:foreground",
       "p:1",
       { "&": { "column-gap": "0.25rem" } }
     ],
@@ -2984,7 +2404,7 @@ function createNavigationMenuStyles() {
 }
 // src/styles/pagination.ts
 import { css as css23 } from "@vertz/ui";
-var focusRing8 = {
+var focusRing7 = {
   "&:focus-visible": [
     "outline-none",
     {
@@ -3029,7 +2449,7 @@ function createPaginationStyles() {
       "bg:transparent",
       "cursor:pointer",
       "transition:all",
-      focusRing8,
+      focusRing7,
       {
         "&": {
           height: "2rem",
@@ -3051,8 +2471,9 @@ function createPaginationStyles() {
       "border:1",
       "border:border",
       "bg:background",
+      "text:foreground",
       "cursor:pointer",
-      focusRing8,
+      focusRing7,
       {
         "&": {
           height: "2rem",
@@ -3071,7 +2492,7 @@ function createPaginationStyles() {
       "bg:transparent",
       "cursor:pointer",
       "transition:all",
-      focusRing8,
+      focusRing7,
       {
         "&": {
           height: "2rem",
@@ -3168,7 +2589,7 @@ function createProgressStyles() {
 }
 // src/styles/radio-group.ts
 import { css as css26 } from "@vertz/ui";
-var focusRing9 = {
+var focusRing8 = {
   "&:focus-visible": [
     "outline-none",
     "border:ring",
@@ -3200,7 +2621,7 @@ function createRadioGroupStyles() {
         }
       },
       { [DARK]: [bgOpacity("input", 30)] },
-      focusRing9,
+      focusRing8,
       { "&:disabled": ["pointer-events-none", "opacity:0.5"] },
       {
         '&[data-state="checked"]': ["bg:primary", "text:primary-foreground", "border:primary"]
@@ -3244,7 +2665,7 @@ function createRadioGroupStyles() {
 }
 // src/styles/resizable-panel.ts
 import { css as css27 } from "@vertz/ui";
-var focusRing10 = {
+var focusRing9 = {
   "&:focus-visible": [
     "outline-none",
     {
@@ -3263,7 +2684,7 @@ function createResizablePanelStyles() {
       "items:center",
       "justify:center",
       "bg:border",
-      focusRing10,
+      focusRing9,
       {
         "&:hover": ["bg:muted-foreground"]
       },
@@ -3319,7 +2740,12 @@ function createScrollAreaStyles() {
         ]
       }
     ],
-    scrollAreaThumb: ["relative", "flex-1", "rounded:full", "bg:border"]
+    scrollAreaThumb: [
+      "relative",
+      "flex-1",
+      "rounded:full",
+      { "&": { "background-color": "color-mix(in oklch, var(--color-foreground) 40%, transparent)" } }
+    ]
   });
   return {
     root: s.scrollAreaRoot,
@@ -3331,7 +2757,7 @@ function createScrollAreaStyles() {
 }
 // src/styles/select.ts
 import { css as css29 } from "@vertz/ui";
-var focusRing11 = {
+var focusRing10 = {
   "&:focus-visible": [
     "outline-none",
     {
@@ -3364,7 +2790,7 @@ function createSelectStyles() {
           "padding-left": "0.625rem"
         }
       },
-      focusRing11,
+      focusRing10,
       { "&:disabled": ["pointer-events-none", "opacity:0.5"] },
       { '&[data-state="open"]': ["border:ring"] },
       { [DARK]: [bgOpacity("input", 30)] },
@@ -3497,7 +2923,7 @@ function createSeparator() {
 }
 // src/styles/sheet.ts
 import { css as css31 } from "@vertz/ui";
-var focusRing12 = {
+var focusRing11 = {
   "&:focus-visible": [
     "outline-none",
     {
@@ -3696,7 +3122,7 @@ function createSheetStyles() {
         }
       },
       { "&:hover": ["opacity:1"] },
-      focusRing12
+      focusRing11
     ]
   });
   return {
@@ -3717,9 +3143,17 @@ var pulse = keyframes2("vz-skeleton-pulse", {
   "0%, 100%": { opacity: "1" },
   "50%": { opacity: "0.5" }
 });
+var skeletonBase = [
+  "bg:muted",
+  "rounded:md",
+  { "&": { animation: `${pulse} 2s ease-in-out infinite` } }
+];
 function createSkeletonStyles() {
   return css32({
-    base: ["bg:muted", "rounded:md", { "&": { animation: `${pulse} 2s ease-in-out infinite` } }]
+    root: [...skeletonBase],
+    textRoot: ["flex", "flex-col"],
+    textLine: [...skeletonBase, "h:4"],
+    circleRoot: [...skeletonBase, { "&": { borderRadius: "50%" } }]
   });
 }
 // src/styles/slider.ts
@@ -3800,7 +3234,7 @@ function createSliderStyles() {
 }
 // src/styles/switch.ts
 import { css as css34 } from "@vertz/ui";
-var focusRing13 = {
+var focusRing12 = {
   "&:focus-visible": [
     "outline-none",
     "border:ring",
@@ -3824,7 +3258,7 @@ function createSwitchStyles() {
       "h:5",
       "w:8",
       { [DARK]: [bgOpacity("input", 80)] },
-      focusRing13,
+      focusRing12,
       { "&:disabled": ["pointer-events-none", "opacity:0.5"] },
       {
         '&[data-state="checked"]': ["bg:primary"],
@@ -3872,7 +3306,7 @@ function createSwitchStyles() {
       "h:3.5",
       "w:6",
       { [DARK]: [bgOpacity("input", 80)] },
-      focusRing13,
+      focusRing12,
       { "&:disabled": ["pointer-events-none", "opacity:0.5"] },
       {
         '&[data-state="checked"]': ["bg:primary"],
@@ -4066,7 +3500,7 @@ function createTabsStyles() {
 // src/styles/textarea.ts
 import { css as css37 } from "@vertz/ui";
 function createTextarea() {
-  const focusRing14 = {
+  const focusRing13 = {
     "&:focus-visible": [
       "outline-none",
       "border:ring",
@@ -4096,7 +3530,7 @@ function createTextarea() {
       "text:sm",
       "text:foreground",
       "transition:colors",
-      focusRing14,
+      focusRing13,
       { "&:disabled": ["pointer-events-none", "opacity:0.5"] },
       { [DARK]: [bgOpacity("input", 30)] }
     ]
@@ -4108,7 +3542,7 @@ function createTextarea() {
 }
 // src/styles/toast.ts
 import { css as css38 } from "@vertz/ui";
-var focusRing14 = {
+var focusRing13 = {
   "&:focus-visible": [
     "outline-none",
     {
@@ -4175,7 +3609,7 @@ function createToastStyles() {
       "shrink-0",
       { "&": { height: "2rem" } },
       { "&:hover": ["bg:secondary"] },
-      focusRing14
+      focusRing13
     ],
     toastClose: [
       "absolute",
@@ -4184,7 +3618,7 @@ function createToastStyles() {
       "cursor:pointer",
       "transition:colors",
       { "&:hover": ["opacity:1"] },
-      focusRing14
+      focusRing13
     ]
   });
   return {
@@ -4199,7 +3633,7 @@ function createToastStyles() {
 }
 // src/styles/toggle.ts
 import { css as css39 } from "@vertz/ui";
-var focusRing15 = {
+var focusRing14 = {
   "&:focus-visible": [
     "outline-none",
     {
@@ -4222,7 +3656,7 @@ function createToggleStyles() {
       "gap:2",
       "px:3",
       "h:9",
-      focusRing15,
+      focusRing14,
       { "&:hover": ["bg:muted", "text:muted-foreground"] },
       { "&:disabled": ["pointer-events-none", "opacity:0.5"] },
       {
@@ -4237,7 +3671,7 @@ function createToggleStyles() {
 }
 // src/styles/toggle-group.ts
 import { css as css40 } from "@vertz/ui";
-var focusRing16 = {
+var focusRing15 = {
   "&:focus-visible": [
     "outline-none",
     {
@@ -4261,7 +3695,7 @@ function createToggleGroupStyles() {
       "bg:transparent",
       "cursor:pointer",
       "transition:colors",
-      focusRing16,
+      focusRing15,
       { "&:hover": ["bg:muted", "text:muted-foreground"] },
       { "&:disabled": ["pointer-events-none", "opacity:0.5"] },
       {
@@ -4314,6 +3748,7 @@ function configureTheme(config) {
   const separatorStyles = createSeparator();
   const formGroupStyles = createFormGroup();
   const dialogStyles = createDialogStyles();
+  createDialogGlobalStyles();
   const dropdownMenuStyles = createDropdownMenuStyles();
   const selectStyles = createSelectStyles();
   const tabsStyles = createTabsStyles();
@@ -4324,12 +3759,12 @@ function configureTheme(config) {
   const radioGroupStyles = createRadioGroupStyles();
   const sliderStyles = createSliderStyles();
   const alertStyles = createAlertStyles();
-  const alertDialogStyles = createAlertDialogStyles();
   const accordionStyles = createAccordionStyles();
   const textareaStyles = createTextarea();
   const toastStyles = createToastStyles();
   const tooltipStyles = createTooltipStyles();
   const avatarStyles = createAvatarStyles();
+  const emptyStateStyles = createEmptyStateStyles();
   const skeletonStyles = createSkeletonStyles();
   const tableStyles = createTableStyles();
   const sheetStyles = createSheetStyles();
@@ -4351,7 +3786,6 @@ function configureTheme(config) {
   const toggleGroupStyles = createToggleGroupStyles();
   const styles = {
     alert: alertStyles,
-    alertDialog: alertDialogStyles,
     button: buttonStyles,
     badge: badgeStyles,
     card: cardStyles,
@@ -4374,6 +3808,7 @@ function configureTheme(config) {
     toast: toastStyles,
     tooltip: tooltipStyles,
     avatar: avatarStyles,
+    emptyState: emptyStateStyles,
     skeleton: skeletonStyles,
     table: tableStyles,
     sheet: sheetStyles,
@@ -4394,24 +3829,109 @@ function configureTheme(config) {
     toggle: toggleStyles,
     toggleGroup: toggleGroupStyles
   };
+  const badgeColorInlineStyles = {
+    blue: { backgroundColor: "oklch(0.55 0.15 250)", color: "#fff" },
+    green: { backgroundColor: "oklch(0.55 0.15 155)", color: "#fff" },
+    yellow: { backgroundColor: "oklch(0.75 0.15 85)", color: "oklch(0.25 0.05 85)" }
+  };
+  const DefaultAlert = withStyles18(ComposedAlert, {
+    root: alertStyles.root,
+    title: alertStyles.title,
+    description: alertStyles.description
+  });
+  const DestructiveAlert = withStyles18(ComposedAlert, {
+    root: [alertStyles.root, alertStyles.destructive].join(" "),
+    title: alertStyles.title,
+    description: alertStyles.description
+  });
+  function ThemedAlert({ variant, ...rest }) {
+    return (variant === "destructive" ? DestructiveAlert : DefaultAlert)(rest);
+  }
+  const Alert = Object.assign(ThemedAlert, {
+    Title: ComposedAlert.Title,
+    Description: ComposedAlert.Description
+  });
   const components = {
-    Alert: createAlertComponents(alertStyles),
-    Button: createButtonComponent(buttonStyles),
-    Badge: createBadgeComponent(badgeStyles),
-    Breadcrumb: createBreadcrumbComponent(breadcrumbStyles),
-    Card: createCardComponents(cardStyles),
-    Input: createInputComponent(inputStyles),
-    Textarea: createTextareaComponent(textareaStyles),
-    Label: createLabelComponent(labelStyles),
-    Pagination: createPaginationComponent(paginationStyles),
-    Separator: createSeparatorComponent(separatorStyles),
-    FormGroup: createFormGroupComponents(formGroupStyles),
-    Avatar: createAvatarComponents(avatarStyles),
-    Skeleton: createSkeletonComponents(skeletonStyles),
-    Table: createTableComponents(tableStyles),
+    Alert,
+    Button: ({ intent, size, ...rest }) => ComposedButton({ ...rest, classes: { base: buttonStyles({ intent, size }) } }),
+    Badge: ({ color, ...rest }) => {
+      const style = color ? badgeColorInlineStyles[color] : undefined;
+      return ComposedBadge({ ...rest, classes: { base: badgeStyles({ color }) }, style });
+    },
+    Breadcrumb: withStyles18(ComposedBreadcrumb, {
+      nav: breadcrumbStyles.nav,
+      list: breadcrumbStyles.list,
+      item: breadcrumbStyles.item,
+      link: breadcrumbStyles.link,
+      page: breadcrumbStyles.page,
+      separator: breadcrumbStyles.separator
+    }),
+    Card: withStyles18(ComposedCard, {
+      root: cardStyles.root,
+      header: cardStyles.header,
+      title: cardStyles.title,
+      description: cardStyles.description,
+      content: cardStyles.content,
+      footer: cardStyles.footer,
+      action: cardStyles.action
+    }),
+    Input: withStyles18(ComposedInput, { base: inputStyles.base }),
+    Textarea: withStyles18(ComposedTextarea, { base: textareaStyles.base }),
+    Label: withStyles18(ComposedLabel, { base: labelStyles.base }),
+    Pagination: (props) => ComposedPagination({
+      ...props,
+      classes: {
+        nav: paginationStyles.nav,
+        list: paginationStyles.list,
+        item: paginationStyles.item,
+        link: paginationStyles.link,
+        linkActive: paginationStyles.linkActive,
+        navButton: paginationStyles.navButton,
+        ellipsis: paginationStyles.ellipsis
+      }
+    }),
+    Separator: withStyles18(ComposedSeparator, {
+      base: separatorStyles.base,
+      horizontal: separatorStyles.horizontal,
+      vertical: separatorStyles.vertical
+    }),
+    FormGroup: withStyles18(ComposedFormGroup, {
+      base: formGroupStyles.base,
+      error: formGroupStyles.error
+    }),
+    Avatar: withStyles18(ComposedAvatar, {
+      root: avatarStyles.root,
+      image: avatarStyles.image,
+      fallback: avatarStyles.fallback
+    }),
+    EmptyState: withStyles18(ComposedEmptyState, {
+      root: emptyStateStyles.root,
+      icon: emptyStateStyles.icon,
+      title: emptyStateStyles.title,
+      description: emptyStateStyles.description,
+      action: emptyStateStyles.action
+    }),
+    Skeleton: Object.assign(withStyles18(ComposedSkeleton, { root: skeletonStyles.root }), {
+      Text: withStyles18(ComposedSkeleton.Text, {
+        root: skeletonStyles.textRoot,
+        line: skeletonStyles.textLine
+      }),
+      Circle: withStyles18(ComposedSkeleton.Circle, {
+        root: skeletonStyles.circleRoot
+      })
+    }),
+    Table: withStyles18(ComposedTable, {
+      root: tableStyles.root,
+      header: tableStyles.header,
+      body: tableStyles.body,
+      row: tableStyles.row,
+      head: tableStyles.head,
+      cell: tableStyles.cell,
+      caption: tableStyles.caption,
+      footer: tableStyles.footer
+    }),
     primitives: {
-      AlertDialog: createThemedAlertDialog(alertDialogStyles),
-      Dialog: createThemedDialog(dialogStyles),
+      Dialog: createThemedDialog(),
       DropdownMenu: createThemedDropdownMenu(dropdownMenuStyles),
       Select: createThemedSelect(selectStyles),
       Tabs: createThemedTabs(tabsStyles),
@@ -4430,7 +3950,10 @@ function configureTheme(config) {
       Collapsible: createThemedCollapsible(collapsibleStyles),
       Command: createThemedCommand(commandStyles),
       ContextMenu: createThemedContextMenu(contextMenuStyles),
-      DatePicker: createThemedDatePicker(datePickerStyles, calendarStyles),
+      DatePicker: createThemedDatePicker(datePickerStyles, {
+        ...calendarStyles,
+        root: calendarStyles.rootNoBorder
+      }),
       Drawer: createThemedDrawer(drawerStyles),
       HoverCard: createThemedHoverCard(hoverCardStyles),
       Menubar: createThemedMenubar(menubarStyles),
@@ -4444,5 +3967,7 @@ function configureTheme(config) {
   return { theme, globals, styles, components };
 }
 export {
-  configureTheme
+  palettes,
+  configureTheme,
+  RADIUS_VALUES
 };