@vertz/theme-shadcn 0.2.21 → 0.2.23

package/dist/index.js

@@ -8,7 +8,7 @@ import {
 } from "./shared/chunk-gzfp8m46.js";
 import {
   configureThemeBase
-} from "./shared/chunk-d2nh1syq.js";
+} from "./shared/chunk-gjsm05ga.js";
 
 // src/components/alert.ts
 import { resolveChildren } from "@vertz/ui";
@@ -92,9 +92,9 @@ function createAvatarComponents(avatarStyles) {
 import { resolveChildren as resolveChildren3 } from "@vertz/ui";
 function createBadgeComponent(badgeStyles) {
   const colorStyles = {
-    blue: "background-color: oklch(0.55 0.15 250); color: #fff;",
-    green: "background-color: oklch(0.55 0.15 155); color: #fff;",
-    yellow: "background-color: oklch(0.75 0.15 85); color: oklch(0.25 0.05 85);"
+    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,
@@ -107,7 +107,7 @@ function createBadgeComponent(badgeStyles) {
     el.className = [badgeStyles({ color }), effectiveClass].filter(Boolean).join(" ");
     const inlineStyle = color ? colorStyles[color] : undefined;
     if (inlineStyle) {
-      el.style.cssText = inlineStyle;
+      Object.assign(el.style, inlineStyle);
     }
     for (const node of resolveChildren3(children)) {
       el.appendChild(node);
@@ -382,8 +382,10 @@ function createPaginationComponent(styles) {
     prevLi.classList.add(styles.item);
     const prevBtn = document.createElement("button");
     prevBtn.setAttribute("type", "button");
-    prevBtn.classList.add(styles.link);
-    prevBtn.textContent = "‹";
+    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;
@@ -400,7 +402,7 @@ function createPaginationComponent(styles) {
         const span = document.createElement("span");
         span.setAttribute("aria-hidden", "true");
         span.classList.add(styles.ellipsis);
-        span.textContent = "…";
+        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");
@@ -421,8 +423,10 @@ function createPaginationComponent(styles) {
     nextLi.classList.add(styles.item);
     const nextBtn = document.createElement("button");
     nextBtn.setAttribute("type", "button");
-    nextBtn.classList.add(styles.link);
-    nextBtn.textContent = "›";
+    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;
@@ -478,7 +482,7 @@ function createThemedAccordion(styles) {
 // src/components/primitives/alert-dialog.ts
 import { ComposedAlertDialog, withStyles as withStyles2 } from "@vertz/ui-primitives";
 function createThemedAlertDialog(styles) {
-  const StyledAlertDialog = withStyles2(ComposedAlertDialog, {
+  return withStyles2(ComposedAlertDialog, {
     overlay: styles.overlay,
     content: styles.panel,
     cancel: styles.cancel,
@@ -488,27 +492,6 @@ function createThemedAlertDialog(styles) {
     footer: styles.footer,
     header: ""
   });
-  function AlertDialogRoot({
-    children,
-    onOpenChange,
-    onAction
-  }) {
-    return StyledAlertDialog({
-      children,
-      onOpenChange,
-      onAction
-    });
-  }
-  return Object.assign(AlertDialogRoot, {
-    Trigger: StyledAlertDialog.Trigger,
-    Content: StyledAlertDialog.Content,
-    Header: StyledAlertDialog.Header,
-    Title: StyledAlertDialog.Title,
-    Description: StyledAlertDialog.Description,
-    Footer: StyledAlertDialog.Footer,
-    Cancel: StyledAlertDialog.Cancel,
-    Action: StyledAlertDialog.Action
-  });
 }
 
 // src/components/primitives/calendar.ts
@@ -522,7 +505,9 @@ function createThemedCalendar(styles) {
     grid: styles.grid,
     headCell: styles.headCell,
     cell: styles.cell,
-    dayButton: styles.dayButton
+    dayButton: styles.dayButton,
+    monthSelect: styles.monthSelect,
+    yearSelect: styles.yearSelect
   });
   return function CalendarRoot(props) {
     return StyledCalendar(props);
@@ -573,14 +558,29 @@ function createThemedCheckbox(styles) {
   };
 }
 
-// src/components/primitives/collapsible.ts
-import { Collapsible } from "@vertz/ui-primitives";
+// src/components/primitives/collapsible.tsx
+import { ComposedCollapsible } from "@vertz/ui-primitives";
 function createThemedCollapsible(styles) {
-  return function themedCollapsible(options) {
-    const result = Collapsible.Root(options);
-    result.content.classList.add(styles.content);
-    return result;
-  };
+  function CollapsibleRoot({
+    children,
+    defaultOpen,
+    disabled,
+    onOpenChange
+  }) {
+    return ComposedCollapsible({
+      children,
+      defaultOpen,
+      disabled,
+      onOpenChange,
+      classes: {
+        content: styles.content
+      }
+    });
+  }
+  return Object.assign(CollapsibleRoot, {
+    Trigger: ComposedCollapsible.Trigger,
+    Content: ComposedCollapsible.Content
+  });
 }
 
 // src/components/primitives/command.tsx
@@ -644,21 +644,53 @@ function createThemedContextMenu(styles) {
   });
 }
 
-// src/components/primitives/date-picker.ts
-import { DatePicker } from "@vertz/ui-primitives";
-function createThemedDatePicker(styles) {
-  return function themedDatePicker(options) {
-    const result = DatePicker.Root(options);
-    result.trigger.classList.add(styles.trigger);
-    result.content.classList.add(styles.content);
-    return result;
-  };
+// src/components/primitives/date-picker.tsx
+import { ComposedDatePicker } from "@vertz/ui-primitives";
+function createThemedDatePicker(styles, calendarClasses) {
+  function DatePickerRoot({
+    children,
+    mode,
+    defaultValue,
+    defaultMonth,
+    minDate,
+    maxDate,
+    disabled,
+    formatDate,
+    placeholder,
+    onValueChange,
+    onOpenChange,
+    captionLayout
+  }) {
+    return ComposedDatePicker({
+      children,
+      mode,
+      defaultValue,
+      defaultMonth,
+      minDate,
+      maxDate,
+      disabled,
+      formatDate,
+      placeholder,
+      onValueChange,
+      onOpenChange,
+      captionLayout,
+      classes: {
+        trigger: styles.trigger,
+        content: styles.content,
+        calendar: calendarClasses
+      }
+    });
+  }
+  return Object.assign(DatePickerRoot, {
+    Trigger: ComposedDatePicker.Trigger,
+    Content: ComposedDatePicker.Content
+  });
 }
 
 // src/components/primitives/dialog.ts
 import { ComposedDialog, withStyles as withStyles8 } from "@vertz/ui-primitives";
 function createThemedDialog(styles) {
-  const StyledDialog = withStyles8(ComposedDialog, {
+  return withStyles8(ComposedDialog, {
     overlay: styles.overlay,
     content: styles.panel,
     close: styles.close,
@@ -667,31 +699,10 @@ function createThemedDialog(styles) {
     description: styles.description,
     footer: styles.footer
   });
-  function DialogRoot({ children, onOpenChange }) {
-    const closeIcon = document.createElement("button");
-    closeIcon.type = "button";
-    closeIcon.className = styles.close;
-    closeIcon.setAttribute("aria-label", "Close");
-    closeIcon.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"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>';
-    return StyledDialog({
-      children,
-      onOpenChange,
-      closeIcon
-    });
-  }
-  return Object.assign(DialogRoot, {
-    Trigger: StyledDialog.Trigger,
-    Content: StyledDialog.Content,
-    Header: StyledDialog.Header,
-    Title: StyledDialog.Title,
-    Description: StyledDialog.Description,
-    Footer: StyledDialog.Footer,
-    Close: StyledDialog.Close
-  });
 }
 
 // src/components/primitives/drawer.tsx
-import { __element, __enterChildren, __exitChildren, __insert } from "@vertz/ui/internals";
+import { __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __insert, __pushMountFrame } from "@vertz/ui/internals";
 import { resolveChildren as resolveChildren8 } from "@vertz/ui";
 import { ComposedSheet } from "@vertz/ui-primitives";
 var PANEL_CLASS_MAP = {
@@ -701,81 +712,86 @@ var PANEL_CLASS_MAP = {
   bottom: "panelBottom"
 };
 function createThemedDrawer(styles) {
-  function DrawerRoot({ children, side, onOpenChange }) {
-    const resolvedSide = side ?? "bottom";
-    const panelClass = styles[PANEL_CLASS_MAP[resolvedSide]];
-    return ComposedSheet({
-      children,
-      side: resolvedSide,
-      onOpenChange,
-      classes: {
-        overlay: styles.overlay,
-        content: panelClass,
-        title: styles.title,
-        description: styles.description,
-        close: styles.close
-      }
+  const __mfDepth = __pushMountFrame();
+  try {
+    let DrawerRoot = function({ children, side, onOpenChange }) {
+      const resolvedSide = side ?? "bottom";
+      const panelClass = styles[PANEL_CLASS_MAP[resolvedSide]];
+      return ComposedSheet({
+        children,
+        side: resolvedSide,
+        onOpenChange,
+        classes: {
+          overlay: styles.overlay,
+          content: panelClass,
+          title: styles.title,
+          description: styles.description,
+          close: styles.close
+        }
+      });
+    }, DrawerHeader = function({ children, className: cls, class: classProp }) {
+      const effectiveCls = cls ?? classProp;
+      const combined = [styles.header, effectiveCls].filter(Boolean).join(" ");
+      const resolved = resolveChildren8(children);
+      return (() => {
+        const __el0 = __element("div");
+        __el0.setAttribute("data-slot", "drawer-header");
+        {
+          const __v = combined;
+          if (__v != null && __v !== false)
+            __el0.setAttribute("class", __v === true ? "" : __v);
+        }
+        __enterChildren(__el0);
+        __insert(__el0, resolved);
+        __exitChildren();
+        return __el0;
+      })();
+    }, DrawerFooter = function({ children, className: cls, class: classProp }) {
+      const effectiveCls = cls ?? classProp;
+      const combined = [styles.footer, effectiveCls].filter(Boolean).join(" ");
+      const resolved = resolveChildren8(children);
+      return (() => {
+        const __el1 = __element("div");
+        __el1.setAttribute("data-slot", "drawer-footer");
+        {
+          const __v = combined;
+          if (__v != null && __v !== false)
+            __el1.setAttribute("class", __v === true ? "" : __v);
+        }
+        __enterChildren(__el1);
+        __insert(__el1, resolved);
+        __exitChildren();
+        return __el1;
+      })();
+    }, DrawerHandle = function({ className: cls, class: classProp }) {
+      const effectiveCls = cls ?? classProp;
+      const combined = [styles.handle, effectiveCls].filter(Boolean).join(" ");
+      return (() => {
+        const __el2 = __element("div");
+        __el2.setAttribute("data-slot", "drawer-handle");
+        {
+          const __v = combined;
+          if (__v != null && __v !== false)
+            __el2.setAttribute("class", __v === true ? "" : __v);
+        }
+        return __el2;
+      })();
+    };
+    const __mfResult0 = Object.assign(DrawerRoot, {
+      Trigger: ComposedSheet.Trigger,
+      Content: ComposedSheet.Content,
+      Header: DrawerHeader,
+      Title: ComposedSheet.Title,
+      Description: ComposedSheet.Description,
+      Footer: DrawerFooter,
+      Handle: DrawerHandle
     });
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
   }
-  function DrawerHeader({ children, className: cls, class: classProp }) {
-    const effectiveCls = cls ?? classProp;
-    const combined = [styles.header, effectiveCls].filter(Boolean).join(" ");
-    const resolved = resolveChildren8(children);
-    return (() => {
-      const __el0 = __element("div");
-      __el0.setAttribute("data-slot", "drawer-header");
-      {
-        const __v = combined;
-        if (__v != null && __v !== false)
-          __el0.setAttribute("class", __v === true ? "" : __v);
-      }
-      __enterChildren(__el0);
-      __insert(__el0, resolved);
-      __exitChildren();
-      return __el0;
-    })();
-  }
-  function DrawerFooter({ children, className: cls, class: classProp }) {
-    const effectiveCls = cls ?? classProp;
-    const combined = [styles.footer, effectiveCls].filter(Boolean).join(" ");
-    const resolved = resolveChildren8(children);
-    return (() => {
-      const __el1 = __element("div");
-      __el1.setAttribute("data-slot", "drawer-footer");
-      {
-        const __v = combined;
-        if (__v != null && __v !== false)
-          __el1.setAttribute("class", __v === true ? "" : __v);
-      }
-      __enterChildren(__el1);
-      __insert(__el1, resolved);
-      __exitChildren();
-      return __el1;
-    })();
-  }
-  function DrawerHandle({ className: cls, class: classProp }) {
-    const effectiveCls = cls ?? classProp;
-    const combined = [styles.handle, effectiveCls].filter(Boolean).join(" ");
-    return (() => {
-      const __el2 = __element("div");
-      __el2.setAttribute("data-slot", "drawer-handle");
-      {
-        const __v = combined;
-        if (__v != null && __v !== false)
-          __el2.setAttribute("class", __v === true ? "" : __v);
-      }
-      return __el2;
-    })();
-  }
-  return Object.assign(DrawerRoot, {
-    Trigger: ComposedSheet.Trigger,
-    Content: ComposedSheet.Content,
-    Header: DrawerHeader,
-    Title: ComposedSheet.Title,
-    Description: ComposedSheet.Description,
-    Footer: DrawerFooter,
-    Handle: DrawerHandle
-  });
 }
 
 // src/components/primitives/dropdown-menu.ts
@@ -805,17 +821,30 @@ function createThemedDropdownMenu(styles) {
   });
 }
 
-// src/components/primitives/hover-card.ts
-import { HoverCard } from "@vertz/ui-primitives";
+// src/components/primitives/hover-card.tsx
+import { ComposedHoverCard } from "@vertz/ui-primitives";
 function createThemedHoverCard(styles) {
-  return function themedHoverCard(options) {
-    const result = HoverCard.Root({
-      ...options,
-      positioning: { placement: "bottom", portal: true }
+  function HoverCardRoot({
+    children,
+    openDelay,
+    closeDelay,
+    onOpenChange
+  }) {
+    return ComposedHoverCard({
+      children,
+      openDelay,
+      closeDelay,
+      onOpenChange,
+      positioning: { placement: "bottom", portal: true },
+      classes: {
+        content: styles.content
+      }
     });
-    result.content.classList.add(styles.content);
-    return result;
-  };
+  }
+  return Object.assign(HoverCardRoot, {
+    Trigger: ComposedHoverCard.Trigger,
+    Content: ComposedHoverCard.Content
+  });
 }
 
 // src/components/primitives/menubar.ts
@@ -831,7 +860,7 @@ function createThemedMenubar(styles) {
     separator: styles.separator
   });
   function MenubarRoot({ children, onSelect }) {
-    return Styled({ children, onSelect });
+    return Styled({ children, onSelect, positioning: { placement: "bottom-start" } });
   }
   return Object.assign(MenubarRoot, {
     Menu: ComposedMenubar.Menu,
@@ -910,7 +939,8 @@ function createThemedRadioGroup(styles) {
   const StyledRadioGroup = withStyles13(ComposedRadioGroup, {
     root: styles.root,
     item: styles.item,
-    indicator: styles.indicator
+    indicator: styles.indicator,
+    indicatorIcon: styles.indicatorIcon
   });
   function RadioGroupRoot(props) {
     return StyledRadioGroup(props);
@@ -920,44 +950,47 @@ function createThemedRadioGroup(styles) {
   });
 }
 
-// src/components/primitives/resizable-panel.ts
-import { ResizablePanel } from "@vertz/ui-primitives";
+// src/components/primitives/resizable-panel.tsx
+import { ComposedResizablePanel } from "@vertz/ui-primitives";
 function createThemedResizablePanel(styles) {
-  return function themedResizablePanel(options) {
-    const result = ResizablePanel.Root(options);
-    result.root.classList.add(styles.root);
-    const originalPanel = result.Panel;
-    const originalHandle = result.Handle;
-    return {
-      root: result.root,
-      state: result.state,
-      Panel: (panelOptions) => {
-        const panel = originalPanel(panelOptions);
-        panel.classList.add(styles.panel);
-        return panel;
-      },
-      Handle: () => {
-        const handle = originalHandle();
-        handle.classList.add(styles.handle);
-        return handle;
+  function ResizablePanelRoot({
+    children,
+    orientation,
+    onResize
+  }) {
+    return ComposedResizablePanel({
+      children,
+      orientation,
+      onResize,
+      classes: {
+        root: styles.root,
+        panel: styles.panel,
+        handle: styles.handle
       }
-    };
-  };
+    });
+  }
+  return Object.assign(ResizablePanelRoot, {
+    Panel: ComposedResizablePanel.Panel,
+    Handle: ComposedResizablePanel.Handle
+  });
 }
 
-// src/components/primitives/scroll-area.ts
-import { ScrollArea } from "@vertz/ui-primitives";
+// src/components/primitives/scroll-area.tsx
+import { ComposedScrollArea } from "@vertz/ui-primitives";
 function createThemedScrollArea(styles) {
-  return function themedScrollArea(options) {
-    const result = ScrollArea.Root(options);
-    result.root.classList.add(styles.root);
-    result.viewport.classList.add(styles.viewport);
-    result.scrollbarY.classList.add(styles.scrollbar);
-    result.thumbY.classList.add(styles.thumb);
-    result.scrollbarX.classList.add(styles.scrollbar);
-    result.thumbX.classList.add(styles.thumb);
-    return result;
-  };
+  function ScrollAreaRoot({ children, orientation }) {
+    return ComposedScrollArea({
+      children,
+      orientation,
+      classes: {
+        root: styles.root,
+        viewport: styles.viewport,
+        scrollbar: styles.scrollbar,
+        thumb: styles.thumb
+      }
+    });
+  }
+  return ScrollAreaRoot;
 }
 
 // src/components/primitives/select.ts
@@ -1112,26 +1145,25 @@ function createThemedToggle(styles) {
   };
 }
 
-// src/components/primitives/toggle-group.ts
-import { ToggleGroup } from "@vertz/ui-primitives";
+// src/components/primitives/toggle-group.tsx
+import { ComposedToggleGroup, withStyles as withStyles18 } from "@vertz/ui-primitives";
 function createThemedToggleGroup(styles) {
-  return function themedToggleGroup(options) {
-    const result = ToggleGroup.Root(options);
-    result.root.classList.add(styles.root);
-    const originalItem = result.Item;
-    result.Item = (value) => {
-      const item = originalItem(value);
-      item.classList.add(styles.item);
-      return item;
-    };
-    return result;
-  };
+  const StyledToggleGroup = withStyles18(ComposedToggleGroup, {
+    root: styles.root,
+    item: styles.item
+  });
+  function ToggleGroupRoot(props) {
+    return StyledToggleGroup(props);
+  }
+  return Object.assign(ToggleGroupRoot, {
+    Item: ComposedToggleGroup.Item
+  });
 }
 
 // src/components/primitives/tooltip.ts
-import { ComposedTooltip, withStyles as withStyles18 } from "@vertz/ui-primitives";
+import { ComposedTooltip, withStyles as withStyles19 } from "@vertz/ui-primitives";
 function createThemedTooltip(styles) {
-  const StyledTooltip = withStyles18(ComposedTooltip, {
+  const StyledTooltip = withStyles19(ComposedTooltip, {
     content: styles.content
   });
   function TooltipRoot({ children, delay }) {
@@ -1145,10 +1177,17 @@ function createThemedTooltip(styles) {
 
 // src/components/separator.ts
 function createSeparatorComponent(separatorStyles) {
-  return function Separator({ className, class: classProp }) {
+  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, effectiveClass].filter(Boolean).join(" ");
+    el.className = [separatorStyles.base, orientationClass, effectiveClass].filter(Boolean).join(" ");
+    el.setAttribute("role", "separator");
+    el.setAttribute("aria-orientation", orientation);
     return el;
   };
 }
@@ -1354,6 +1393,12 @@ function createAccordionStyles() {
       },
       {
         '&[data-state="closed"]': [animationDecl(`${accordionUp} 200ms ease-out forwards`)]
+      },
+      {
+        '& [data-part="content-inner"]': {
+          "padding-bottom": "1rem",
+          "padding-top": "0"
+        }
       }
     ]
   });
@@ -1424,8 +1469,6 @@ function createAlertDialogStyles() {
       }
     ],
     alertDialogPanel: [
-      "fixed",
-      "z:50",
       "bg:background",
       "gap:4",
       {
@@ -1436,11 +1479,24 @@ function createAlertDialogStyles() {
           "box-shadow": "0 0 0 1px color-mix(in oklch, var(--color-foreground) 10%, transparent)",
           "border-radius": "0.75rem",
           padding: "1rem",
-          inset: "0",
           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" }
       },
       {
@@ -1580,7 +1636,14 @@ function createBreadcrumbStyles() {
       "items:center",
       "gap:1.5",
       "text:sm",
-      "text:muted-foreground"
+      "text:muted-foreground",
+      {
+        "&": {
+          "list-style": "none",
+          margin: "0",
+          padding: "0"
+        }
+      }
     ],
     breadcrumbItem: ["inline-flex", "items:center", "gap:1.5"],
     breadcrumbLink: ["transition:colors", "text:foreground", { "&:hover": ["text:foreground"] }],
@@ -1610,27 +1673,77 @@ var focusRing2 = {
 };
 function createCalendarStyles() {
   const s = css6({
-    calendarRoot: ["p:3"],
-    calendarHeader: ["flex", "items:center", "justify:between", "py:2"],
-    calendarTitle: ["text:sm", "font:medium"],
+    calendarRoot: [
+      "w:fit",
+      "bg:background",
+      "rounded:lg",
+      "border:1",
+      "border:border",
+      {
+        "&": {
+          padding: "0.5rem"
+        }
+      }
+    ],
+    calendarHeader: [
+      "flex",
+      "items:center",
+      "justify:between",
+      {
+        "&": {
+          position: "relative",
+          height: "1.75rem",
+          width: "100%"
+        },
+        '&[data-caption-layout="dropdown"]': {
+          "justify-content": "center",
+          gap: "0.25rem"
+        },
+        '&[data-caption-layout="dropdown-buttons"]': {
+          gap: "0.25rem"
+        }
+      }
+    ],
+    calendarTitle: [
+      "text:sm",
+      "font:medium",
+      {
+        "&": {
+          position: "absolute",
+          inset: "0",
+          display: "flex",
+          "align-items": "center",
+          "justify-content": "center",
+          "pointer-events": "none",
+          "user-select": "none"
+        }
+      }
+    ],
     calendarNavButton: [
       "inline-flex",
       "items:center",
       "justify:center",
-      "rounded:md",
-      "border:1",
-      "border:input",
+      "rounded:lg",
       "bg:transparent",
       "cursor:pointer",
-      "transition:colors",
-      { "&:hover": ["bg:accent", "text:accent-foreground"] },
+      "transition:all",
+      { "&:hover": ["bg:muted", "text:foreground"] },
       focusRing2,
       {
         "&": {
           height: "1.75rem",
-          width: "1.75rem"
+          width: "1.75rem",
+          padding: "0",
+          border: "1px solid transparent",
+          "user-select": "none",
+          "z-index": "1"
+        },
+        '& svg:not([class*="size-"])': {
+          width: "1rem",
+          height: "1rem"
         }
-      }
+      },
+      { '&[aria-disabled="true"]': ["opacity:0.5"] }
     ],
     calendarGrid: [
       {
@@ -1642,12 +1755,13 @@ function createCalendarStyles() {
     ],
     calendarHeadCell: [
       "text:muted-foreground",
-      "text:xs",
-      "font:medium",
+      "font:normal",
       {
         "&": {
-          width: "2rem",
-          "text-align": "center"
+          width: "1.75rem",
+          "text-align": "center",
+          "font-size": "0.8rem",
+          "user-select": "none"
         }
       }
     ],
@@ -1655,7 +1769,8 @@ function createCalendarStyles() {
       {
         "&": {
           "text-align": "center",
-          padding: "0"
+          padding: "0",
+          "user-select": "none"
         }
       }
     ],
@@ -1663,24 +1778,64 @@ function createCalendarStyles() {
       "inline-flex",
       "items:center",
       "justify:center",
-      "rounded:md",
+      "rounded:lg",
       "text:sm",
+      "font:normal",
       "bg:transparent",
       "cursor:pointer",
-      "transition:colors",
+      "transition:all",
       focusRing2,
       {
         "&": {
-          height: "2rem",
-          width: "2rem"
+          height: "1.75rem",
+          width: "1.75rem",
+          border: "1px solid transparent",
+          padding: "0"
         }
       },
-      { "&:hover": ["bg:accent", "text:accent-foreground"] },
+      { "&:hover": ["bg:muted", "text:foreground"] },
       { '&[aria-selected="true"]': ["bg:primary", "text:primary-foreground"] },
-      { '&[data-today="true"]': ["border:1", "border:accent"] },
-      { '&[aria-disabled="true"]': ["opacity:0.5", "pointer-events-none"] },
-      { '&[data-outside-month="true"]': ["text:muted-foreground", "opacity:0.5"] },
-      { '&[data-in-range="true"]': ["bg:accent"] }
+      {
+        '&[data-today="true"]': ["bg:muted", "text:foreground"]
+      },
+      {
+        '&[data-today="true"][aria-selected="true"]': ["bg:primary", "text:primary-foreground"]
+      },
+      {
+        '&[aria-disabled="true"]': ["text:muted-foreground", "opacity:0.5", "pointer-events-none"]
+      },
+      {
+        '&[data-outside-month="true"]': ["text:muted-foreground"]
+      },
+      { '&[data-in-range="true"]': ["bg:muted", "text:foreground"] }
+    ],
+    calendarMonthSelect: [
+      "text:sm",
+      "font:medium",
+      "bg:transparent",
+      "cursor:pointer",
+      focusRing2,
+      {
+        "&": {
+          border: "none",
+          "padding-inline": "0.25rem",
+          appearance: "auto"
+        }
+      }
+    ],
+    calendarYearSelect: [
+      "text:sm",
+      "font:medium",
+      "bg:transparent",
+      "cursor:pointer",
+      focusRing2,
+      {
+        "&": {
+          border: "none",
+          "padding-inline": "0.25rem",
+          appearance: "auto"
+        }
+      }
     ]
   });
   return {
@@ -1692,6 +1847,8 @@ function createCalendarStyles() {
     headCell: s.calendarHeadCell,
     cell: s.calendarCell,
     dayButton: s.calendarDayButton,
+    monthSelect: s.calendarMonthSelect,
+    yearSelect: s.calendarYearSelect,
     css: s.css
   };
 }
@@ -1759,19 +1916,10 @@ function createCard() {
 import { css as css8 } from "@vertz/ui";
 function createCarouselStyles() {
   const s = css8({
-    carouselRoot: ["relative", "overflow-hidden"],
+    carouselRoot: ["relative"],
     carouselViewport: ["overflow-hidden"],
     carouselSlide: [
-      "shrink-0",
-      {
-        "&": {
-          "min-width": "0",
-          "flex-grow": "0",
-          "flex-basis": "100%"
-        }
-      },
-      { '&[data-state="inactive"]': ["opacity:0"] },
-      { '&[data-state="active"]': ["opacity:1"] }
+      { '&[data-state="inactive"]': [{ display: "none" }] }
     ],
     carouselPrevButton: [
       "absolute",
@@ -1865,10 +2013,35 @@ function createCheckboxStyles() {
       }
     ],
     checkboxIndicator: [
+      "relative",
       "flex",
       "items:center",
       "justify:center",
-      { '&[data-state="unchecked"]': ["hidden"] }
+      {
+        '& [data-part="indicator-icon"]': {
+          position: "absolute",
+          inset: "0",
+          opacity: "0",
+          transform: "scale(0.5)",
+          transition: "opacity 150ms cubic-bezier(0.4, 0, 0.2, 1), " + "transform 150ms cubic-bezier(0.4, 0, 0.2, 1)"
+        },
+        '& [data-icon="check"] path': {
+          "stroke-dasharray": "30",
+          "stroke-dashoffset": "30",
+          transition: "stroke-dashoffset 200ms cubic-bezier(0.4, 0, 0.2, 1) 50ms"
+        },
+        '&[data-state="checked"] [data-icon="check"]': {
+          opacity: "1",
+          transform: "scale(1)"
+        },
+        '&[data-state="checked"] [data-icon="check"] path': {
+          "stroke-dashoffset": "0"
+        },
+        '&[data-state="indeterminate"] [data-icon="minus"]': {
+          opacity: "1",
+          transform: "scale(1)"
+        }
+      }
     ]
   });
   return {
@@ -1939,7 +2112,9 @@ function createCommandStyles() {
       focusRing4
     ],
     commandList: [
-      "p:1",
+      "px:1",
+      "pb:1",
+      "pt:2",
       {
         "&": {
           "max-height": "300px",
@@ -2010,11 +2185,15 @@ function createContextMenuStyles() {
       "overflow-hidden",
       "bg:popover",
       "text:popover-foreground",
-      "rounded:md",
-      "border:1",
-      "border:border",
-      "shadow:md",
-      "py:1",
+      "rounded:lg",
+      "w:fit",
+      "p:1",
+      {
+        "&": {
+          "box-shadow": "0 0 0 1px color-mix(in oklch, var(--color-foreground) 10%, transparent), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+          "min-width": "8rem"
+        }
+      },
       {
         '&[data-state="open"]': [animationDecl("vz-zoom-in 150ms ease-out forwards")]
       },
@@ -2025,19 +2204,30 @@ function createContextMenuStyles() {
     cmItem: [
       "flex",
       "items:center",
-      "px:2",
-      "py:1.5",
+      "gap:1.5",
+      "px:1.5",
+      "py:1",
       "text:sm",
       "cursor:pointer",
-      "rounded:sm",
+      "rounded:md",
       "outline-none",
       { "&:hover": ["bg:accent", "text:accent-foreground"] },
       { "&:focus": ["bg:accent", "text:accent-foreground"] },
       { "&[data-disabled]": ["pointer-events-none", "opacity:0.5"] }
     ],
     cmGroup: ["py:1"],
-    cmLabel: ["px:2", "py:1.5", "text:xs", "font:semibold", "text:muted-foreground"],
-    cmSeparator: ["mx:1", "my:1", "border-t:1", "border:muted", { "&": { height: "1px" } }]
+    cmLabel: ["px:1.5", "py:1", "text:xs", "font:medium", "text:muted-foreground"],
+    cmSeparator: [
+      "my:1",
+      "bg:border",
+      {
+        "&": {
+          "margin-left": "-0.25rem",
+          "margin-right": "-0.25rem",
+          height: "1px"
+        }
+      }
+    ]
   });
   return {
     content: s.cmContent,
@@ -2132,8 +2322,6 @@ function createDialogStyles() {
       }
     ],
     dialogPanel: [
-      "fixed",
-      "z:50",
       "bg:background",
       "gap:4",
       {
@@ -2145,12 +2333,24 @@ function createDialogStyles() {
           "border-radius": "0.75rem",
           padding: "1rem",
           "font-size": "0.875rem",
-          inset: "0",
           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" }
       },
       {
@@ -2278,7 +2478,22 @@ function createDrawerStyles() {
           inset: "0 auto 0 0",
           width: "75%",
           "max-width": "24rem",
+          height: "100dvh",
+          "max-height": "none",
+          margin: "0",
+          outline: "none",
+          border: "none",
           "border-radius": "0 0.75rem 0.75rem 0"
+        },
+        '&:not([open]):not([data-state="open"])': { display: "none" },
+        "&::backdrop": {
+          "background-color": "oklch(0 0 0 / 50%)"
+        },
+        '&[data-state="open"]::backdrop': {
+          animation: "vz-fade-in 150ms ease-out forwards"
+        },
+        '&[data-state="closed"]::backdrop': {
+          animation: "vz-fade-out 300ms ease-out forwards"
         }
       },
       {
@@ -2296,7 +2511,22 @@ function createDrawerStyles() {
           inset: "0 0 0 auto",
           width: "75%",
           "max-width": "24rem",
+          height: "100dvh",
+          "max-height": "none",
+          margin: "0",
+          outline: "none",
+          border: "none",
           "border-radius": "0.75rem 0 0 0.75rem"
+        },
+        '&:not([open]):not([data-state="open"])': { display: "none" },
+        "&::backdrop": {
+          "background-color": "oklch(0 0 0 / 50%)"
+        },
+        '&[data-state="open"]::backdrop': {
+          animation: "vz-fade-in 150ms ease-out forwards"
+        },
+        '&[data-state="closed"]::backdrop': {
+          animation: "vz-fade-out 300ms ease-out forwards"
         }
       },
       {
@@ -2312,7 +2542,22 @@ function createDrawerStyles() {
       {
         "&": {
           inset: "0 0 auto 0",
+          width: "100dvw",
+          "max-width": "none",
+          margin: "0",
+          outline: "none",
+          border: "none",
           "border-radius": "0 0 0.75rem 0.75rem"
+        },
+        '&:not([open]):not([data-state="open"])': { display: "none" },
+        "&::backdrop": {
+          "background-color": "oklch(0 0 0 / 50%)"
+        },
+        '&[data-state="open"]::backdrop': {
+          animation: "vz-fade-in 150ms ease-out forwards"
+        },
+        '&[data-state="closed"]::backdrop': {
+          animation: "vz-fade-out 300ms ease-out forwards"
         }
       },
       {
@@ -2328,7 +2573,22 @@ function createDrawerStyles() {
       {
         "&": {
           inset: "auto 0 0 0",
+          width: "100dvw",
+          "max-width": "none",
+          margin: "0",
+          outline: "none",
+          border: "none",
           "border-radius": "0.75rem 0.75rem 0 0"
+        },
+        '&:not([open]):not([data-state="open"])': { display: "none" },
+        "&::backdrop": {
+          "background-color": "oklch(0 0 0 / 50%)"
+        },
+        '&[data-state="open"]::backdrop': {
+          animation: "vz-fade-in 150ms ease-out forwards"
+        },
+        '&[data-state="closed"]::backdrop': {
+          animation: "vz-fade-out 300ms ease-out forwards"
         }
       },
       {
@@ -2402,6 +2662,7 @@ function createDropdownMenuStyles() {
       "bg:popover",
       "text:popover-foreground",
       "rounded:lg",
+      "w:fit",
       "p:1",
       {
         "&": {
@@ -2472,21 +2733,26 @@ function createHoverCardStyles() {
   const s = css18({
     hoverCardContent: [
       "z:50",
-      "rounded:md",
+      "rounded:lg",
       "border:1",
       "border:border",
       "bg:popover",
       "text:popover-foreground",
       "shadow:md",
+      "outline-none",
       "p:4",
       {
         "&": { width: "16rem" }
       },
       {
-        '&[data-state="open"]': [animationDecl("vz-fade-in 150ms ease-out forwards")]
+        '&[data-state="open"]': [
+          animationDecl("vz-fade-in 150ms ease-out forwards, vz-zoom-in 150ms ease-out forwards")
+        ]
       },
       {
-        '&[data-state="closed"]': [animationDecl("vz-fade-out 150ms ease-out forwards")]
+        '&[data-state="closed"]': [
+          animationDecl("vz-fade-out 150ms ease-out forwards, vz-zoom-out 150ms ease-out forwards")
+        ]
       }
     ]
   });
@@ -2729,43 +2995,111 @@ var focusRing8 = {
 };
 function createPaginationStyles() {
   const s = css23({
-    paginationNav: [],
-    paginationList: ["flex", "flex-wrap", "items:center", "gap:1"],
+    paginationNav: [
+      "flex",
+      "justify:center",
+      {
+        "&": {
+          "margin-left": "auto",
+          "margin-right": "auto",
+          width: "100%"
+        }
+      }
+    ],
+    paginationList: [
+      "flex",
+      "items:center",
+      {
+        "&": {
+          gap: "0.125rem",
+          "list-style": "none",
+          margin: "0",
+          padding: "0"
+        }
+      }
+    ],
     paginationItem: [],
     paginationLink: [
       "inline-flex",
       "items:center",
       "justify:center",
-      "rounded:md",
+      "rounded:lg",
       "text:sm",
       "font:medium",
-      "h:9",
-      "w:9",
-      "border:1",
-      "border:input",
-      "bg:background",
+      "bg:transparent",
       "cursor:pointer",
-      "transition:colors",
+      "transition:all",
       focusRing8,
-      { "&:hover": ["bg:accent", "text:accent-foreground"] },
+      {
+        "&": {
+          height: "2rem",
+          width: "2rem",
+          border: "1px solid transparent",
+          "white-space": "nowrap"
+        }
+      },
+      { "&:hover": ["bg:muted", "text:foreground"] },
       { "&:disabled": ["pointer-events-none", "opacity:0.5"] }
     ],
     paginationLinkActive: [
       "inline-flex",
       "items:center",
       "justify:center",
-      "rounded:md",
+      "rounded:lg",
       "text:sm",
       "font:medium",
-      "h:9",
-      "w:9",
-      "bg:primary",
-      "text:primary-foreground",
       "border:1",
-      "border:primary",
-      focusRing8
+      "border:border",
+      "bg:background",
+      "cursor:pointer",
+      focusRing8,
+      {
+        "&": {
+          height: "2rem",
+          width: "2rem"
+        }
+      },
+      { "&:hover": ["bg:muted", "text:foreground"] }
+    ],
+    paginationNavButton: [
+      "inline-flex",
+      "items:center",
+      "justify:center",
+      "rounded:lg",
+      "text:sm",
+      "font:medium",
+      "bg:transparent",
+      "cursor:pointer",
+      "transition:all",
+      focusRing8,
+      {
+        "&": {
+          height: "2rem",
+          border: "1px solid transparent",
+          "white-space": "nowrap",
+          gap: "0.375rem",
+          "padding-left": "0.375rem",
+          "padding-right": "0.625rem"
+        }
+      },
+      { "&:hover": ["bg:muted", "text:foreground"] },
+      { "&:disabled": ["pointer-events-none", "opacity:0.5"] }
     ],
-    paginationEllipsis: ["inline-flex", "items:center", "justify:center", "h:9", "w:9", "text:sm"]
+    paginationEllipsis: [
+      "inline-flex",
+      "items:center",
+      "justify:center",
+      {
+        "&": {
+          height: "2rem",
+          width: "2rem"
+        },
+        '& svg:not([class*="size-"])': {
+          width: "1rem",
+          height: "1rem"
+        }
+      }
+    ]
   });
   return {
     nav: s.paginationNav,
@@ -2773,6 +3107,7 @@ function createPaginationStyles() {
     item: s.paginationItem,
     link: s.paginationLink,
     linkActive: s.paginationLinkActive,
+    navButton: s.paginationNavButton,
     ellipsis: s.paginationEllipsis,
     css: s.css
   };
@@ -2787,6 +3122,7 @@ function createPopoverStyles() {
       "bg:popover",
       "text:popover-foreground",
       "rounded:lg",
+      "w:fit",
       "flex",
       "flex-col",
       "gap:2.5",
@@ -2920,7 +3256,7 @@ var focusRing10 = {
 function createResizablePanelStyles() {
   const s = css27({
     resizableRoot: ["flex", "h:full", "w:full"],
-    resizablePanel: ["overflow-hidden"],
+    resizablePanel: ["overflow-hidden", { "&": [{ "white-space": "nowrap" }] }],
     resizableHandle: [
       "relative",
       "flex",
@@ -3031,7 +3367,15 @@ function createSelectStyles() {
       focusRing11,
       { "&:disabled": ["pointer-events-none", "opacity:0.5"] },
       { '&[data-state="open"]': ["border:ring"] },
-      { [DARK]: [bgOpacity("input", 30)] }
+      { [DARK]: [bgOpacity("input", 30)] },
+      {
+        '& [data-part="chevron"]': {
+          opacity: "0.5",
+          "flex-shrink": "0",
+          display: "flex",
+          "align-items": "center"
+        }
+      }
     ],
     selectContent: [
       "z:50",
@@ -3048,21 +3392,21 @@ function createSelectStyles() {
       },
       {
         '&[data-state="open"][data-side="bottom"]': [
-          animationDecl("vz-slide-down-in 100ms ease-out forwards")
+          animationDecl("vz-slide-in-from-top 150ms ease-out forwards")
         ]
       },
       {
         '&[data-state="open"][data-side="top"]': [
-          animationDecl("vz-slide-up-in 100ms ease-out forwards")
+          animationDecl("vz-slide-in-from-bottom 150ms ease-out forwards")
         ]
       },
       {
         '&[data-state="open"]:not([data-side])': [
-          animationDecl("vz-zoom-in 100ms ease-out forwards")
+          animationDecl("vz-zoom-in 150ms ease-out forwards")
         ]
       },
       {
-        '&[data-state="closed"]': [animationDecl("vz-zoom-out 100ms ease-out forwards")]
+        '&[data-state="closed"]': [animationDecl("vz-zoom-out 150ms ease-out forwards")]
       }
     ],
     selectItem: [
@@ -3203,7 +3547,24 @@ function createSheetStyles() {
         "&": {
           inset: "0 auto 0 0",
           width: "75%",
-          "max-width": "24rem"
+          "max-width": "24rem",
+          height: "100dvh",
+          "max-height": "none",
+          margin: "0",
+          outline: "none",
+          border: "none"
+        },
+        '&: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 300ms ease-out forwards"
         }
       },
       {
@@ -3220,7 +3581,24 @@ function createSheetStyles() {
         "&": {
           inset: "0 0 0 auto",
           width: "75%",
-          "max-width": "24rem"
+          "max-width": "24rem",
+          height: "100dvh",
+          "max-height": "none",
+          margin: "0",
+          outline: "none",
+          border: "none"
+        },
+        '&: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 300ms ease-out forwards"
         }
       },
       {
@@ -3234,7 +3612,26 @@ function createSheetStyles() {
       ...PANEL_BASE2,
       "border-b:1",
       {
-        "&": { inset: "0 0 auto 0" }
+        "&": {
+          inset: "0 0 auto 0",
+          width: "100dvw",
+          "max-width": "none",
+          margin: "0",
+          outline: "none",
+          border: "none"
+        },
+        '&: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 300ms ease-out forwards"
+        }
       },
       {
         '&[data-state="open"]': [animationDecl("vz-slide-in-from-top 300ms ease-out forwards")]
@@ -3247,7 +3644,26 @@ function createSheetStyles() {
       ...PANEL_BASE2,
       "border-t:1",
       {
-        "&": { inset: "auto 0 0 0" }
+        "&": {
+          inset: "auto 0 0 0",
+          width: "100dvw",
+          "max-width": "none",
+          margin: "0",
+          outline: "none",
+          border: "none"
+        },
+        '&: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 300ms ease-out forwards"
+        }
       },
       {
         '&[data-state="open"]': [animationDecl("vz-slide-in-from-bottom 300ms ease-out forwards")]
@@ -4011,18 +4427,18 @@ function configureTheme(config) {
       Sheet: createThemedSheet(sheetStyles),
       Calendar: createThemedCalendar(calendarStyles),
       Carousel: createThemedCarousel(carouselStyles),
-      collapsible: createThemedCollapsible(collapsibleStyles),
+      Collapsible: createThemedCollapsible(collapsibleStyles),
       Command: createThemedCommand(commandStyles),
       ContextMenu: createThemedContextMenu(contextMenuStyles),
-      datePicker: createThemedDatePicker(datePickerStyles),
+      DatePicker: createThemedDatePicker(datePickerStyles, calendarStyles),
       Drawer: createThemedDrawer(drawerStyles),
-      hoverCard: createThemedHoverCard(hoverCardStyles),
+      HoverCard: createThemedHoverCard(hoverCardStyles),
       Menubar: createThemedMenubar(menubarStyles),
       NavigationMenu: createThemedNavigationMenu(navigationMenuStyles),
-      resizablePanel: createThemedResizablePanel(resizablePanelStyles),
-      scrollArea: createThemedScrollArea(scrollAreaStyles),
+      ResizablePanel: createThemedResizablePanel(resizablePanelStyles),
+      ScrollArea: createThemedScrollArea(scrollAreaStyles),
       Toggle: createThemedToggle(toggleStyles),
-      toggleGroup: createThemedToggleGroup(toggleGroupStyles)
+      ToggleGroup: createThemedToggleGroup(toggleGroupStyles)
     }
   };
   return { theme, globals, styles, components };