@womp/kookie-ui 0.23.0 → 0.25.0

package/src/components/checkbox-group.tsx

@@ -76,21 +76,13 @@ const CheckboxGroupItem = React.forwardRef<CheckboxGroupItemElement, CheckboxGro
     const { __scopeCheckboxGroup, children, className, style, ...props } = _props;
     const { size } = useCheckboxGroupContext('CheckboxGroupItem', __scopeCheckboxGroup);
 
-    // Helper to safely convert size to Text-compatible size
-    const getTextSize = (sizeValue: any): '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' => {
-      if (typeof sizeValue === 'string' && /^[1-9]$/.test(sizeValue)) {
-        return sizeValue as any;
-      }
-      return '3';
-    };
-
     // Render `<Text as="label">` if children are provided, otherwise render
     // the solo checkbox to allow building out your custom layouts with it.
     if (children) {
       return (
         <Text
           as="label"
-          size={getTextSize(size)}
+          size={size}
           className={classNames('kui-CheckboxGroupItem', className)}
           style={style}
         >

package/src/components/checkbox.css

@@ -1,13 +1,9 @@
 @import './_internal/base-checkbox.css';
 
-/* The disabled cursor lives in the base mark. */
+/* The disabled cursor and colours live in the base mark, per variant. */
 .kui-CheckboxRoot {
   &:where(:focus-visible)::before {
     outline: var(--focus-ring-width, 2px) solid var(--focus-8);
     outline-offset: var(--focus-ring-offset, 2px);
   }
-
-  &:where(:disabled)::before {
-    background-color: var(--neutral-a3);
-  }
 }

package/src/components/chip.css

@@ -14,11 +14,22 @@
   /* Fix Chrome background bleeding on rounded corners */
   background-clip: padding-box;
 
-  /* Force Chrome to recalculate styles when radius changes */
-  will-change: border-radius;
-
   isolation: isolate;
 
+  /* An icon is one line tall, so it never changes the chip's height. */
+  /* stylelint-disable-next-line selector-max-type */
+  & :where(svg) {
+    flex: none;
+    width: var(--chip-icon-size);
+    height: var(--chip-icon-size);
+  }
+
+  /* A chip with a tooltip is focusable, and shows the ring every control does. */
+  &:where(:focus-visible) {
+    outline: var(--focus-ring-width) solid var(--focus-8);
+    outline-offset: var(--focus-ring-offset);
+  }
+
   /* Forced colors support */
   @media (forced-colors: active) {
     border: 1px solid CanvasText;
@@ -37,6 +48,7 @@
 @breakpoints {
   .kui-Chip {
     &:where(.kui-r-size-1) {
+      --chip-icon-size: var(--icon-size-1);
       font-size: var(--font-size-1);
       line-height: var(--line-height-1);
       letter-spacing: var(--letter-spacing-1);
@@ -45,6 +57,7 @@
       border-radius: max(calc(var(--radius-1) * var(--spacing-multiplier-medium)), var(--radius-full));
     }
     &:where(.kui-r-size-2) {
+      --chip-icon-size: var(--icon-size-2);
       font-size: var(--font-size-1);
       line-height: var(--line-height-1);
       letter-spacing: var(--letter-spacing-1);
@@ -57,6 +70,7 @@
       }
     }
     &:where(.kui-r-size-3) {
+      --chip-icon-size: var(--icon-size-3);
       font-size: var(--font-size-2);
       line-height: var(--line-height-2);
       letter-spacing: var(--letter-spacing-2);
@@ -70,6 +84,7 @@
       }
     }
     &:where(.kui-r-size-4) {
+      --chip-icon-size: var(--icon-size-4);
       font-size: var(--font-size-3);
       line-height: var(--line-height-3);
       letter-spacing: var(--letter-spacing-3);
@@ -95,14 +110,6 @@
 .kui-Chip:where(.kui-variant-solid) {
   background-color: var(--accent-solid);
   color: var(--accent-solid-contrast);
-
-  &:where([data-disabled]) {
-    color: var(--neutral-a8);
-    background-color: var(--neutral-a3);
-    outline: none;
-    filter: none;
-    cursor: default;
-  }
 }
 
 /* surface */
@@ -117,22 +124,10 @@
 
 .kui-Chip:where(.kui-variant-soft, .kui-variant-ghost) {
   color: var(--accent-ink);
-
-  &:where([data-disabled]) {
-    color: var(--neutral-a8);
-    background-color: var(--neutral-a3);
-    cursor: default;
-  }
 }
 
 .kui-Chip:where(.kui-variant-soft) {
   background-color: var(--accent-3);
-
-  &:where([data-disabled]) {
-    color: var(--neutral-a8);
-    background-color: var(--neutral-a3);
-    cursor: default;
-  }
 }
 
 /* outline */

package/src/components/chip.tsx

@@ -41,15 +41,14 @@ const Chip = React.forwardRef<ChipElement, ChipProps>((props, forwardedRef) => {
     ...chipProps
   } = extractProps(props, chipPropDefs);
 
-
-
-  // Memoize component variable to prevent unnecessary re-renders
-  const Comp = React.useMemo(() => (asChild ? Slot.Root : 'span'), [asChild]);
+  const Comp = asChild ? Slot.Root : 'span';
 
   const chip = (
     <Comp
       data-accent-color={color}
       data-radius={radius}
+      // A tooltip opens on focus, so a chip that has one joins the tab order.
+      tabIndex={tooltip ? 0 : undefined}
       {...chipProps}
       ref={forwardedRef}
       className={classNames('kui-reset', 'kui-Chip', className)}

package/src/components/code.tsx

@@ -18,8 +18,9 @@ const Code = React.forwardRef<CodeElement, CodeProps>((props, forwardedRef) => {
     props,
     codePropDefs,
   );
-  // Code ghost color prop should work as text color by default
-  const resolvedColor = props.variant === 'ghost' ? color || undefined : color;
+  // A ghost Code has no fill, so it rests on the surrounding text colour: only a colour the caller
+  // set reaches it, never the gray default.
+  const resolvedColor = props.variant === 'ghost' && !props.color ? undefined : color;
   const Comp = asChild ? Slot.Root : 'code';
   return (
     <Comp

package/src/components/combobox.tsx

@@ -28,6 +28,7 @@ import { extractProps } from '../helpers/extract-props.js';
 import { useThemeSize } from '../helpers/theme-size.js';
 import { comboboxRootPropDefs, comboboxTriggerPropDefs, comboboxContentPropDefs } from './combobox.props.js';
 import { ChevronDownIcon, ThickCheckIcon } from './icons.js';
+import { Spinner } from './spinner.js';
 import { Theme, useThemeContext } from './theme.js';
 import { requireReactElement } from '../helpers/require-react-element.js';
 import * as Popover from './popover.js';
@@ -365,36 +366,25 @@ const ComboboxTrigger = React.forwardRef<ComboboxTriggerElement, ComboboxTrigger
   const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {
     onKeyDown?.(event);
     if (event.defaultPrevented || isBlocked || isDisabled) return;
-    if (event.key === 'ArrowDown') {
+    // Both arrows open the list, as on Select (APG select-only combobox).
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
       event.preventDefault();
       ctx.setOpen(true);
     }
   };
 
+  const loadingIcon = (
+    <span className="kui-SelectIcon kui-SelectLoadingIcon" aria-hidden="true">
+      <Spinner />
+    </span>
+  );
+
   const defaultContent = (
     <>
       <span className="kui-SelectTriggerInner">
         <span className="kui-ComboboxValue">{ctx.displayValue ?? ctx.value ?? placeholder ?? ctx.placeholder}</span>
       </span>
-      {loading ? (
-        <div className="kui-SelectIcon kui-SelectLoadingIcon" aria-hidden="true">
-          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-            <circle
-              cx="8"
-              cy="8"
-              r="7"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeDasharray="32"
-              strokeDashoffset="32"
-              className="kui-SelectLoadingIconCircle"
-            />
-          </svg>
-        </div>
-      ) : (
-        <ChevronDownIcon className="kui-SelectIcon" />
-      )}
+      {loading ? loadingIcon : <ChevronDownIcon className="kui-SelectIcon" />}
     </>
   );
 
@@ -413,10 +403,11 @@ const ComboboxTrigger = React.forwardRef<ComboboxTriggerElement, ComboboxTrigger
         {...triggerProps}
         // eslint-disable-next-line jsx-a11y/role-has-required-aria-props -- Popover.Trigger (Slot) adds aria-expanded and aria-controls
         role="combobox"
-        aria-disabled={isDisabled || undefined}
-        aria-readonly={readOnly || undefined}
-        aria-invalid={error || undefined}
-        aria-busy={loading || undefined}
+        // The props win when set; otherwise a caller's own aria-* (a form library's aria-invalid) stays, as on Select.
+        aria-disabled={isDisabled || triggerProps['aria-disabled']}
+        aria-readonly={readOnly || triggerProps['aria-readonly']}
+        aria-invalid={error || triggerProps['aria-invalid']}
+        aria-busy={loading || triggerProps['aria-busy']}
         type={buttonType ?? 'button'}
         disabled={isDisabled}
         onClick={handleClick}
@@ -424,7 +415,15 @@ const ComboboxTrigger = React.forwardRef<ComboboxTriggerElement, ComboboxTrigger
         ref={composedRef}
         className={classNames('kui-reset', 'kui-SelectTrigger', 'kui-ComboboxTrigger', className)}
       >
-        {children ? requireReactElement(children) : defaultContent}
+        {/* Custom children replace the value and chevron; the spinner still shows while loading. */}
+        {children ? (
+          <>
+            {requireReactElement(children)}
+            {loading ? loadingIcon : null}
+          </>
+        ) : (
+          defaultContent
+        )}
       </button>
     </Popover.Trigger>
   );
@@ -774,7 +773,7 @@ const ComboboxItem = React.forwardRef<ComboboxItemElement, ComboboxItemProps>(
     const searchKeywords = text ? (keywords ? [text, ...keywords] : [text]) : keywords;
     // cmdk stores keywords only when `value` changes. Remount the cmdk item when
     // they change so a new label or keyword list is picked up.
-    const keywordsKey = searchKeywords ? searchKeywords.join('') : '';
+    const keywordsKey = searchKeywords ? searchKeywords.join('\u0000') : '';
 
     const isDisabled = disabled ?? rootDisabled ?? false;
 

package/src/components/context-menu.tsx

@@ -4,11 +4,10 @@
  */
 'use client';
 
-import { warnDeprecated } from '../helpers/warn-deprecated.js';
 import * as React from 'react';
-import { VirtualMenu } from './virtual-menu.js';
 import classNames from 'classnames';
 import { ContextMenu as ContextMenuPrimitive, Slot } from 'radix-ui';
+import { useCallbackRef } from 'radix-ui/internal';
 
 import { ScrollArea } from './scroll-area.js';
 import {
@@ -23,7 +22,13 @@ import { ThickCheckIcon, ThickChevronRightIcon, ThickDotIcon } from './icons.js'
 import { extractProps } from '../helpers/extract-props.js';
 import { useThemeSizeProps } from '../helpers/theme-size.js';
 import { requireReactElement } from '../helpers/require-react-element.js';
-import { MenuProvider } from './_internal/menu-context.js';
+import {
+  MenuCloseProvider,
+  MenuGroupLabelProvider,
+  MenuProvider,
+  useMenuGroupLabelId,
+  useMenuGroupLabelledBy,
+} from './_internal/menu-context.js';
 import {
   MenuShortcut,
   getMenuAlignOffset,
@@ -36,9 +41,27 @@ import type { GetPropDefTypes, Responsive } from '../props/prop-def.js';
 
 interface ContextMenuRootProps
   extends React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Root> {}
-const ContextMenuRoot: React.FC<ContextMenuRootProps> = (props) => (
-  <ContextMenuPrimitive.Root {...props} />
-);
+const ContextMenuRoot: React.FC<ContextMenuRootProps> = (props) => {
+  const { open: openProp, onOpenChange } = props;
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);
+  const open = openProp ?? uncontrolledOpen;
+
+  const handleOpenChangeProp = useCallbackRef(onOpenChange);
+  const handleOpenChange = React.useCallback(
+    (next: boolean) => {
+      setUncontrolledOpen(next);
+      handleOpenChangeProp(next);
+    },
+    [handleOpenChangeProp],
+  );
+  const close = React.useCallback(() => handleOpenChange(false), [handleOpenChange]);
+
+  return (
+    <MenuCloseProvider value={close}>
+      <ContextMenuPrimitive.Root {...props} open={open} onOpenChange={handleOpenChange} />
+    </MenuCloseProvider>
+  );
+};
 ContextMenuRoot.displayName = 'ContextMenu.Root';
 
 type ContextMenuTriggerElement = React.ElementRef<typeof ContextMenuPrimitive.Trigger>;
@@ -147,14 +170,18 @@ type ContextMenuLabelElement = React.ElementRef<typeof ContextMenuPrimitive.Labe
 interface ContextMenuLabelProps
   extends ComponentPropsWithout<typeof ContextMenuPrimitive.Label, RemovedProps> {}
 const ContextMenuLabel = React.forwardRef<ContextMenuLabelElement, ContextMenuLabelProps>(
-  ({ className, ...props }, forwardedRef) => (
-    <ContextMenuPrimitive.Label
-      {...props}
-      asChild={false}
-      ref={forwardedRef}
-      className={classNames('kui-BaseMenuLabel', 'kui-ContextMenuLabel', className)}
-    />
-  ),
+  ({ className, id: idProp, ...props }, forwardedRef) => {
+    const id = useMenuGroupLabelId(idProp);
+    return (
+      <ContextMenuPrimitive.Label
+        {...props}
+        id={id}
+        asChild={false}
+        ref={forwardedRef}
+        className={classNames('kui-BaseMenuLabel', 'kui-ContextMenuLabel', className)}
+      />
+    );
+  },
 );
 ContextMenuLabel.displayName = 'ContextMenu.Label';
 
@@ -192,14 +219,20 @@ type ContextMenuGroupElement = React.ElementRef<typeof ContextMenuPrimitive.Grou
 interface ContextMenuGroupProps
   extends ComponentPropsWithout<typeof ContextMenuPrimitive.Group, RemovedProps> {}
 const ContextMenuGroup = React.forwardRef<ContextMenuGroupElement, ContextMenuGroupProps>(
-  ({ className, ...props }, forwardedRef) => (
-    <ContextMenuPrimitive.Group
-      {...props}
-      asChild={false}
-      ref={forwardedRef}
-      className={classNames('kui-BaseMenuGroup', 'kui-ContextMenuGroup', className)}
-    />
-  ),
+  ({ className, 'aria-labelledby': ariaLabelledBy, ...props }, forwardedRef) => {
+    const [labelledBy, setLabelId] = useMenuGroupLabelledBy(ariaLabelledBy);
+    return (
+      <MenuGroupLabelProvider value={setLabelId}>
+        <ContextMenuPrimitive.Group
+          aria-labelledby={labelledBy}
+          {...props}
+          asChild={false}
+          ref={forwardedRef}
+          className={classNames('kui-BaseMenuGroup', 'kui-ContextMenuGroup', className)}
+        />
+      </MenuGroupLabelProvider>
+    );
+  },
 );
 ContextMenuGroup.displayName = 'ContextMenu.Group';
 
@@ -209,14 +242,20 @@ interface ContextMenuRadioGroupProps
 const ContextMenuRadioGroup = React.forwardRef<
   ContextMenuRadioGroupElement,
   ContextMenuRadioGroupProps
->(({ className, ...props }, forwardedRef) => (
-  <ContextMenuPrimitive.RadioGroup
-    {...props}
-    asChild={false}
-    ref={forwardedRef}
-    className={classNames('kui-BaseMenuRadioGroup', 'kui-ContextMenuRadioGroup', className)}
-  />
-));
+>(({ className, 'aria-labelledby': ariaLabelledBy, ...props }, forwardedRef) => {
+  const [labelledBy, setLabelId] = useMenuGroupLabelledBy(ariaLabelledBy);
+  return (
+    <MenuGroupLabelProvider value={setLabelId}>
+      <ContextMenuPrimitive.RadioGroup
+        aria-labelledby={labelledBy}
+        {...props}
+        asChild={false}
+        ref={forwardedRef}
+        className={classNames('kui-BaseMenuRadioGroup', 'kui-ContextMenuRadioGroup', className)}
+      />
+    </MenuGroupLabelProvider>
+  );
+});
 ContextMenuRadioGroup.displayName = 'ContextMenu.RadioGroup';
 
 type ContextMenuRadioItemElement = React.ElementRef<typeof ContextMenuPrimitive.RadioItem>;
@@ -446,7 +485,6 @@ export {
   ContextMenuSubTrigger as SubTrigger,
   ContextMenuSubContent as SubContent,
   ContextMenuSeparator as Separator,
-  VirtualMenu as Virtual,
 };
 
 export type {

package/src/components/dialog.tsx

@@ -12,196 +12,95 @@ import { requireReactElement } from '../helpers/require-react-element.js';
 import { useBodyPointerEventsCleanup } from '../hooks/use-body-pointer-events-cleanup.js';
 
 import type { DialogContentOwnProps } from './dialog.props.js';
-import type {
-  ComponentPropsWithout,
-  RemovedProps,
-  ComponentPropsAs,
-} from '../helpers/component-props.js';
+import type { ComponentPropsWithout, RemovedProps, ComponentPropsAs } from '../helpers/component-props.js';
 
 interface DialogRootProps extends ComponentPropsWithout<typeof DialogPrimitive.Root, 'modal'> {}
 const DialogRoot: React.FC<DialogRootProps> = (props) => <DialogPrimitive.Root {...props} modal />;
 DialogRoot.displayName = 'Dialog.Root';
 
 type DialogTriggerElement = React.ElementRef<typeof DialogPrimitive.Trigger>;
-interface DialogTriggerProps
-  extends ComponentPropsWithout<typeof DialogPrimitive.Trigger, RemovedProps> {}
-const DialogTrigger = React.forwardRef<DialogTriggerElement, DialogTriggerProps>(
-  ({ children, ...props }, forwardedRef) => (
-    <DialogPrimitive.Trigger {...props} ref={forwardedRef} asChild>
-      {requireReactElement(children)}
-    </DialogPrimitive.Trigger>
-  ),
-);
+interface DialogTriggerProps extends ComponentPropsWithout<typeof DialogPrimitive.Trigger, RemovedProps> {}
+const DialogTrigger = React.forwardRef<DialogTriggerElement, DialogTriggerProps>(({ children, ...props }, forwardedRef) => (
+  <DialogPrimitive.Trigger {...props} ref={forwardedRef} asChild>
+    {requireReactElement(children)}
+  </DialogPrimitive.Trigger>
+));
 DialogTrigger.displayName = 'Dialog.Trigger';
 
 // Split once at module scope. `extractProps` memoises on the identity of the
 // prop def objects it is handed, so rebuilding these per render would recompile
 // them on every render.
-const {
-  align: alignPropDef,
-  ...contentPropDefs
-} = dialogContentPropDefs;
+const { align: alignPropDef, ...contentPropDefs } = dialogContentPropDefs;
 const alignPropDefs = { align: alignPropDef };
 
 type DialogContentElement = React.ElementRef<typeof DialogPrimitive.Content>;
-interface DialogContentProps
-  extends ComponentPropsWithout<typeof DialogPrimitive.Content, RemovedProps>,
-    DialogContentOwnProps {
+interface DialogContentProps extends ComponentPropsWithout<typeof DialogPrimitive.Content, RemovedProps>, DialogContentOwnProps {
   container?: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Portal>['container'];
 }
-const DialogContent = React.forwardRef<DialogContentElement, DialogContentProps>(
-  ({ align, ...ownProps }, forwardedRef) => {
-    const props = useThemeSizeProps(ownProps, contentPropDefs.size);
-    const { className: alignClassName } = extractProps({ align }, alignPropDefs);
-
-    const {
-      className,
-      forceMount,
-      container,
-      ...contentProps
-    } = extractProps(props, contentPropDefs);
-
-    // Focus management
-    const contentRef = React.useRef<HTMLDivElement>(null);
-    const combinedRef = React.useMemo(
-      () => (node: HTMLDivElement | null) => {
-        contentRef.current = node;
-        if (typeof forwardedRef === 'function') {
-          forwardedRef(node);
-        } else if (forwardedRef) {
-          forwardedRef.current = node;
-        }
-      },
-      [forwardedRef],
-    );
-
-    // Cleanup stuck pointer-events on body
-    useBodyPointerEventsCleanup();
-
-    // Focus trap effect
-    React.useEffect(() => {
-      // SSR safety - only run on client
-      if (typeof window === 'undefined') return;
-
-      const content = contentRef.current;
-      if (!content) return;
-
-      const focusableElements = content.querySelectorAll(
-        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
-      );
-
-      if (focusableElements.length === 0) return;
-
-      const firstElement = focusableElements[0] as HTMLElement;
-      const lastElement = focusableElements[focusableElements.length - 1] as HTMLElement;
-
-      const handleKeyDown = (event: KeyboardEvent) => {
-        if (event.key === 'Tab') {
-          if (event.shiftKey) {
-            if (document.activeElement === firstElement) {
-              event.preventDefault();
-              lastElement.focus();
-            }
-          } else {
-            if (document.activeElement === lastElement) {
-              event.preventDefault();
-              firstElement.focus();
-            }
-          }
-        }
-      };
-
-      content.addEventListener('keydown', handleKeyDown);
-
-      // Focus first element when dialog opens
-      firstElement.focus();
-
-      return () => {
-        content.removeEventListener('keydown', handleKeyDown);
-      };
-    }, []);
-
-    return (
-      <DialogPrimitive.Portal container={container} forceMount={forceMount}>
-        <Theme asChild>
-          <DialogPrimitive.Overlay className="kui-BaseDialogOverlay kui-DialogOverlay">
-            <div className="kui-BaseDialogScroll kui-DialogScroll">
-              <div
-                className={`kui-BaseDialogScrollPadding kui-DialogScrollPadding ${alignClassName}`}
-              >
-                <DialogPrimitive.Content
-                  {...contentProps}
-                  ref={combinedRef}
-                  className={classNames('kui-BaseDialogContent', 'kui-DialogContent', className)}
-                  tabIndex={-1}
-                  role="dialog"
-                  aria-modal="true"
-                  onCloseAutoFocus={(event) => {
-                    // Prevent default focus behavior
-                    event.preventDefault();
-                    // Restore pointer-events to body (Radix UI fix for issue #1241)
-                    document.body.style.pointerEvents = '';
-                  }}
-                />
-                {/* ARIA live region for screen reader announcements */}
-                <div
-                  aria-live="polite"
-                  aria-atomic="true"
-                  className="kui-sr-only"
-                  id="dialog-announcement"
-                />
-              </div>
+const DialogContent = React.forwardRef<DialogContentElement, DialogContentProps>(({ align, ...ownProps }, forwardedRef) => {
+  const props = useThemeSizeProps(ownProps, contentPropDefs.size);
+  const { className: alignClassName } = extractProps({ align }, alignPropDefs);
+
+  const { className, forceMount, container, onCloseAutoFocus, ...contentProps } = extractProps(props, contentPropDefs);
+
+  // Cleanup stuck pointer-events on body
+  useBodyPointerEventsCleanup();
+
+  return (
+    <DialogPrimitive.Portal container={container} forceMount={forceMount}>
+      <Theme asChild>
+        <DialogPrimitive.Overlay className="kui-BaseDialogOverlay kui-DialogOverlay">
+          <div className="kui-BaseDialogScroll kui-DialogScroll">
+            <div className={`kui-BaseDialogScrollPadding kui-DialogScrollPadding ${alignClassName}`}>
+              <DialogPrimitive.Content
+                {...contentProps}
+                ref={forwardedRef}
+                className={classNames('kui-BaseDialogContent', 'kui-DialogContent', className)}
+                aria-modal="true"
+                onCloseAutoFocus={(event) => {
+                  // Radix returns focus to the trigger unless the caller prevents it.
+                  onCloseAutoFocus?.(event);
+                  // Restore pointer-events to body (Radix UI fix for issue #1241)
+                  document.body.style.pointerEvents = '';
+                }}
+              />
             </div>
-          </DialogPrimitive.Overlay>
-        </Theme>
-      </DialogPrimitive.Portal>
-    );
-  },
-);
+          </div>
+        </DialogPrimitive.Overlay>
+      </Theme>
+    </DialogPrimitive.Portal>
+  );
+});
 DialogContent.displayName = 'Dialog.Content';
 
 type DialogTitleElement = React.ElementRef<typeof Heading>;
 type DialogTitleProps = ComponentPropsWithout<typeof Heading, 'asChild'>;
-const DialogTitle = React.forwardRef<DialogTitleElement, DialogTitleProps>(
-  (props, forwardedRef) => (
-    <DialogPrimitive.Title asChild>
-      <Heading size="5" trim="start" {...props} asChild={false} ref={forwardedRef} />
-    </DialogPrimitive.Title>
-  ),
-);
+const DialogTitle = React.forwardRef<DialogTitleElement, DialogTitleProps>((props, forwardedRef) => (
+  <DialogPrimitive.Title asChild>
+    <Heading size="5" trim="start" {...props} asChild={false} ref={forwardedRef} />
+  </DialogPrimitive.Title>
+));
 DialogTitle.displayName = 'Dialog.Title';
 
 type DialogDescriptionElement = HTMLParagraphElement;
 type DialogDescriptionProps = ComponentPropsAs<typeof Text, 'p'>;
-const DialogDescription = React.forwardRef<DialogDescriptionElement, DialogDescriptionProps>(
-  (props, forwardedRef) => (
-    <DialogPrimitive.Description asChild>
-      <Text as="p" size="3" {...props} asChild={false} ref={forwardedRef} />
-    </DialogPrimitive.Description>
-  ),
-);
+const DialogDescription = React.forwardRef<DialogDescriptionElement, DialogDescriptionProps>((props, forwardedRef) => (
+  <DialogPrimitive.Description asChild>
+    <Text as="p" size="3" {...props} asChild={false} ref={forwardedRef} />
+  </DialogPrimitive.Description>
+));
 DialogDescription.displayName = 'Dialog.Description';
 
 type DialogCloseElement = React.ElementRef<typeof DialogPrimitive.Close>;
-interface DialogCloseProps
-  extends ComponentPropsWithout<typeof DialogPrimitive.Close, RemovedProps> {}
-const DialogClose = React.forwardRef<DialogCloseElement, DialogCloseProps>(
-  ({ children, ...props }, forwardedRef) => (
-    <DialogPrimitive.Close {...props} ref={forwardedRef} asChild>
-      {requireReactElement(children)}
-    </DialogPrimitive.Close>
-  ),
-);
+interface DialogCloseProps extends ComponentPropsWithout<typeof DialogPrimitive.Close, RemovedProps> {}
+const DialogClose = React.forwardRef<DialogCloseElement, DialogCloseProps>(({ children, ...props }, forwardedRef) => (
+  <DialogPrimitive.Close {...props} ref={forwardedRef} asChild>
+    {requireReactElement(children)}
+  </DialogPrimitive.Close>
+));
 DialogClose.displayName = 'Dialog.Close';
 
-export {
-  DialogRoot as Root,
-  DialogTrigger as Trigger,
-  DialogContent as Content,
-  DialogTitle as Title,
-  DialogDescription as Description,
-  DialogClose as Close,
-};
+export { DialogRoot as Root, DialogTrigger as Trigger, DialogContent as Content, DialogTitle as Title, DialogDescription as Description, DialogClose as Close };
 
 export type {
   DialogRootProps as RootProps,