@womp/kookie-ui 0.20.0 → 0.22.0

package/src/components/dropdown-menu.tsx

@@ -201,20 +201,20 @@ const DropdownMenuContent = React.forwardRef<DropdownMenuContentElement, Dropdow
             asChild={false}
             ref={forwardedRef}
             className={classNames(
-              'rt-PopperContent',
-              'rt-BaseMenuContent',
-          'rt-variant-soft',
-              'rt-DropdownMenuContent',
+              'kui-PopperContent',
+              'kui-BaseMenuContent',
+          'kui-variant-soft',
+              'kui-DropdownMenuContent',
               className,
             )}
           >
             {virtualized ? (
-              <div className={classNames('rt-BaseMenuViewport', 'rt-DropdownMenuViewport', 'rt-virtualized')}>
+              <div className={classNames('kui-BaseMenuViewport', 'kui-DropdownMenuViewport', 'kui-virtualized')}>
                 {contentBody}
               </div>
             ) : (
               <ScrollArea type="auto" scrollbars="vertical">
-                <div className={classNames('rt-BaseMenuViewport', 'rt-DropdownMenuViewport')}>
+                <div className={classNames('kui-BaseMenuViewport', 'kui-DropdownMenuViewport')}>
                   {contentBody}
                 </div>
               </ScrollArea>
@@ -238,7 +238,7 @@ const DropdownMenuLabel = React.forwardRef<DropdownMenuLabelElement, DropdownMen
         {...props}
         asChild={false}
         ref={forwardedRef}
-        className={classNames('rt-BaseMenuLabel', 'rt-DropdownMenuLabel', className)}
+        className={classNames('kui-BaseMenuLabel', 'kui-DropdownMenuLabel', className)}
       />
     );
   },
@@ -267,10 +267,10 @@ const DropdownMenuItem = React.forwardRef<DropdownMenuItemElement, DropdownMenuI
         aria-keyshortcuts={shortcut ? toAriaKeyShortcuts(shortcut) : undefined}
         {...itemProps}
         ref={forwardedRef}
-        className={classNames('rt-reset', 'rt-BaseMenuItem', 'rt-DropdownMenuItem', className)}
+        className={classNames('kui-reset', 'kui-BaseMenuItem', 'kui-DropdownMenuItem', className)}
       >
         <Slot.Slottable>{children}</Slot.Slottable>
-        {shortcut && <MenuShortcut shortcut={shortcut} className="rt-DropdownMenuShortcut" />}
+        {shortcut && <MenuShortcut shortcut={shortcut} className="kui-DropdownMenuShortcut" />}
       </DropdownMenuPrimitive.Item>
     );
   },
@@ -286,7 +286,7 @@ const DropdownMenuGroup = React.forwardRef<DropdownMenuGroupElement, DropdownMen
       {...props}
       asChild={false}
       ref={forwardedRef}
-      className={classNames('rt-BaseMenuGroup', 'rt-DropdownMenuGroup', className)}
+      className={classNames('kui-BaseMenuGroup', 'kui-DropdownMenuGroup', className)}
     />
   ),
 );
@@ -303,7 +303,7 @@ const DropdownMenuRadioGroup = React.forwardRef<
     {...props}
     asChild={false}
     ref={forwardedRef}
-    className={classNames('rt-BaseMenuRadioGroup', 'rt-DropdownMenuRadioGroup', className)}
+    className={classNames('kui-BaseMenuRadioGroup', 'kui-DropdownMenuRadioGroup', className)}
   />
 ));
 DropdownMenuRadioGroup.displayName = 'DropdownMenu.RadioGroup';
@@ -331,16 +331,16 @@ const DropdownMenuRadioItem = React.forwardRef<
       ref={forwardedRef}
       data-accent-color={color}
       className={classNames(
-        'rt-BaseMenuItem',
-        'rt-BaseMenuRadioItem',
-        'rt-DropdownMenuItem',
-        'rt-DropdownMenuRadioItem',
+        'kui-BaseMenuItem',
+        'kui-BaseMenuRadioItem',
+        'kui-DropdownMenuItem',
+        'kui-DropdownMenuRadioItem',
         className,
       )}
     >
       {children}
-      <DropdownMenuPrimitive.ItemIndicator className="rt-BaseMenuItemIndicator rt-DropdownMenuItemIndicator">
-        <ThickDotIcon className="rt-BaseMenuItemIndicatorIcon rt-DropdownMenuItemIndicatorIcon" />
+      <DropdownMenuPrimitive.ItemIndicator className="kui-BaseMenuItemIndicator kui-DropdownMenuItemIndicator">
+        <ThickDotIcon className="kui-BaseMenuItemIndicatorIcon kui-DropdownMenuItemIndicatorIcon" />
       </DropdownMenuPrimitive.ItemIndicator>
     </DropdownMenuPrimitive.RadioItem>
   );
@@ -372,18 +372,18 @@ const DropdownMenuCheckboxItem = React.forwardRef<
       ref={forwardedRef}
       data-accent-color={color}
       className={classNames(
-        'rt-BaseMenuItem',
-        'rt-BaseMenuCheckboxItem',
-        'rt-DropdownMenuItem',
-        'rt-DropdownMenuCheckboxItem',
+        'kui-BaseMenuItem',
+        'kui-BaseMenuCheckboxItem',
+        'kui-DropdownMenuItem',
+        'kui-DropdownMenuCheckboxItem',
         className,
       )}
     >
       {children}
-      <DropdownMenuPrimitive.ItemIndicator className="rt-BaseMenuItemIndicator rt-DropdownMenuItemIndicator">
-        <ThickCheckIcon className="rt-BaseMenuItemIndicatorIcon rt-DropdownMenuItemIndicatorIcon" />
+      <DropdownMenuPrimitive.ItemIndicator className="kui-BaseMenuItemIndicator kui-DropdownMenuItemIndicator">
+        <ThickCheckIcon className="kui-BaseMenuItemIndicatorIcon kui-DropdownMenuItemIndicatorIcon" />
       </DropdownMenuPrimitive.ItemIndicator>
-      {shortcut && <MenuShortcut shortcut={shortcut} className="rt-DropdownMenuShortcut" />}
+      {shortcut && <MenuShortcut shortcut={shortcut} className="kui-DropdownMenuShortcut" />}
     </DropdownMenuPrimitive.CheckboxItem>
   );
 });
@@ -489,18 +489,18 @@ const DropdownMenuSubTrigger = React.forwardRef<
         onKeyDown={handleKeyDown}
         ref={forwardedRef}
         className={classNames(
-          'rt-reset',
-          'rt-BaseMenuItem',
-          'rt-BaseMenuSubTrigger',
-          'rt-DropdownMenuItem',
-          'rt-DropdownMenuSubTrigger',
-          'rt-DropdownMenuDrillDownSubTrigger',
+          'kui-reset',
+          'kui-BaseMenuItem',
+          'kui-BaseMenuSubTrigger',
+          'kui-DropdownMenuItem',
+          'kui-DropdownMenuSubTrigger',
+          'kui-DropdownMenuDrillDownSubTrigger',
           className,
         )}
       >
         {children}
-        <div className="rt-BaseMenuShortcut rt-DropdownMenuShortcut">
-          <ThickChevronRightIcon className="rt-BaseMenuSubTriggerIcon rt-DropdownMenuSubTriggerIcon" />
+        <div className="kui-BaseMenuShortcut kui-DropdownMenuShortcut">
+          <ThickChevronRightIcon className="kui-BaseMenuSubTriggerIcon kui-DropdownMenuSubTriggerIcon" />
         </div>
       </DropdownMenuPrimitive.Item>
     );
@@ -513,16 +513,16 @@ const DropdownMenuSubTrigger = React.forwardRef<
       asChild={false}
       ref={forwardedRef}
       className={classNames(
-        'rt-BaseMenuItem',
-        'rt-BaseMenuSubTrigger',
-        'rt-DropdownMenuItem',
-        'rt-DropdownMenuSubTrigger',
+        'kui-BaseMenuItem',
+        'kui-BaseMenuSubTrigger',
+        'kui-DropdownMenuItem',
+        'kui-DropdownMenuSubTrigger',
         className,
       )}
     >
       {children}
-      <div className="rt-BaseMenuShortcut rt-DropdownMenuShortcut">
-        <ThickChevronRightIcon className="rt-BaseMenuSubTriggerIcon rt-DropdownMenuSubTriggerIcon" />
+      <div className="kui-BaseMenuShortcut kui-DropdownMenuShortcut">
+        <ThickChevronRightIcon className="kui-BaseMenuSubTriggerIcon kui-DropdownMenuSubTriggerIcon" />
       </div>
     </DropdownMenuPrimitive.SubTrigger>
   );
@@ -542,7 +542,7 @@ const DropdownMenuSeparator = React.forwardRef<
       {...props}
       asChild={false}
       ref={forwardedRef}
-      className={classNames('rt-BaseMenuSeparator', 'rt-DropdownMenuSeparator', className)}
+      className={classNames('kui-BaseMenuSeparator', 'kui-DropdownMenuSeparator', className)}
     />
   );
 });
@@ -572,14 +572,14 @@ function DrillDownBackItem({ label, name }: { label: React.ReactNode; name: stri
       textValue={labelText || 'Back'}
       onSelect={handleSelect}
       className={classNames(
-        'rt-reset',
-        'rt-BaseMenuItem',
-        'rt-DropdownMenuItem',
-        'rt-DropdownMenuDrillDownBackItem',
+        'kui-reset',
+        'kui-BaseMenuItem',
+        'kui-DropdownMenuItem',
+        'kui-DropdownMenuDrillDownBackItem',
       )}
     >
-      <ThickChevronLeftIcon className="rt-BaseMenuSubTriggerIcon rt-DropdownMenuDrillDownBackIcon" />
-      <span className="rt-DropdownMenuDrillDownBackLabel">{label}</span>
+      <ThickChevronLeftIcon className="kui-BaseMenuSubTriggerIcon kui-DropdownMenuDrillDownBackIcon" />
+      <span className="kui-DropdownMenuDrillDownBackLabel">{label}</span>
     </DropdownMenuPrimitive.Item>
   );
 }
@@ -694,22 +694,22 @@ const CascadeSubContent = React.forwardRef<DropdownMenuSubContentElement, Dropdo
             asChild={false}
             ref={forwardedRef}
             className={classNames(
-              'rt-PopperContent',
-              'rt-BaseMenuContent',
-          'rt-variant-soft',
-              'rt-BaseMenuSubContent',
-              'rt-DropdownMenuContent',
-              'rt-DropdownMenuSubContent',
+              'kui-PopperContent',
+              'kui-BaseMenuContent',
+          'kui-variant-soft',
+              'kui-BaseMenuSubContent',
+              'kui-DropdownMenuContent',
+              'kui-DropdownMenuSubContent',
               className,
             )}
           >
             {virtualized ? (
-              <div className={classNames('rt-BaseMenuViewport', 'rt-DropdownMenuViewport', 'rt-virtualized')}>
+              <div className={classNames('kui-BaseMenuViewport', 'kui-DropdownMenuViewport', 'kui-virtualized')}>
                 {body}
               </div>
             ) : (
               <ScrollArea type="auto" scrollbars="vertical">
-                <div className={classNames('rt-BaseMenuViewport', 'rt-DropdownMenuViewport')}>{body}</div>
+                <div className={classNames('kui-BaseMenuViewport', 'kui-DropdownMenuViewport')}>{body}</div>
               </ScrollArea>
             )}
           </DropdownMenuPrimitive.SubContent>
@@ -761,12 +761,12 @@ const DrillDownPanel = React.forwardRef<DropdownMenuSubContentElement, DrillDown
         data-drill-down-panel={sub.id}
         data-drill-down-active={isTop ? true : undefined}
         data-animation-direction={isTop ? (direction ?? undefined) : undefined}
-        className={classNames('rt-DropdownMenuDrillDownPanel', className)}
+        className={classNames('kui-DropdownMenuDrillDownPanel', className)}
       >
         {isTop && (
           <>
             <DrillDownBackItem label={sub.label} name={name} />
-            <DropdownMenuPrimitive.Separator className="rt-BaseMenuSeparator rt-DropdownMenuSeparator" />
+            <DropdownMenuPrimitive.Separator className="kui-BaseMenuSeparator kui-DropdownMenuSeparator" />
           </>
         )}
         <DrillDownLevelContext.Provider value={isTop}>{children}</DrillDownLevelContext.Provider>
@@ -785,7 +785,7 @@ const DropdownMenuTriggerIcon = React.forwardRef<
   <ChevronDownIcon
     {...props}
     ref={forwardedRef}
-    className={classNames('rt-DropdownMenuTriggerIcon', className)}
+    className={classNames('kui-DropdownMenuTriggerIcon', className)}
   />
 ));
 DropdownMenuTriggerIcon.displayName = 'DropdownMenu.TriggerIcon';

package/src/components/flex.css

@@ -1,4 +1,4 @@
-.rt-Flex {
+.kui-Flex {
   box-sizing: border-box;
 
   /* Default values to provide the initial styles in the object syntax, e.g. `<Flex display={{ md: 'none' }} />` */

package/src/components/flex.props.tsx

@@ -33,7 +33,7 @@ const flexPropDefs = {
    */
   display: {
     type: 'enum',
-    className: 'rt-r-display',
+    className: 'kui-r-display',
     values: displayValues,
     responsive: true,
   },
@@ -50,7 +50,7 @@ const flexPropDefs = {
    */
   direction: {
     type: 'enum',
-    className: 'rt-r-fd',
+    className: 'kui-r-fd',
     values: directionValues,
     responsive: true,
   },
@@ -67,7 +67,7 @@ const flexPropDefs = {
    */
   align: {
     type: 'enum',
-    className: 'rt-r-ai',
+    className: 'kui-r-ai',
     values: alignValues,
     responsive: true,
   },
@@ -84,7 +84,7 @@ const flexPropDefs = {
    */
   justify: {
     type: 'enum',
-    className: 'rt-r-jc',
+    className: 'kui-r-jc',
     values: justifyValues,
     parseValue: parseJustifyValue,
     responsive: true,
@@ -102,7 +102,7 @@ const flexPropDefs = {
    */
   wrap: {
     type: 'enum',
-    className: 'rt-r-fw',
+    className: 'kui-r-fw',
     values: wrapValues,
     responsive: true,
   },

package/src/components/flex.tsx

@@ -26,7 +26,7 @@ const Flex = React.forwardRef<FlexElement, FlexProps>((props, forwardedRef) => {
     ...flexProps
   } = extractProps(props, flexPropDefs, layoutPropDefs, marginPropDefs);
   const Comp = asChild ? Slot : Tag;
-  return <Comp {...flexProps} ref={forwardedRef} className={classNames('rt-Flex', className)} />;
+  return <Comp {...flexProps} ref={forwardedRef} className={classNames('kui-Flex', className)} />;
 });
 Flex.displayName = 'Flex';
 

package/src/components/grid.css

@@ -1,4 +1,4 @@
-.rt-Grid {
+.kui-Grid {
   box-sizing: border-box;
 
   /* Default values to provide the initial styles in the object syntax, e.g. `<Grid columns={{ md: '2' }} />` */

package/src/components/grid.props.tsx

@@ -45,7 +45,7 @@ const gridPropDefs = {
    */
   display: {
     type: 'enum',
-    className: 'rt-r-display',
+    className: 'kui-r-display',
     values: displayValues,
     responsive: true,
   },
@@ -61,7 +61,7 @@ const gridPropDefs = {
    */
   areas: {
     type: 'string',
-    className: 'rt-r-gta',
+    className: 'kui-r-gta',
     customProperties: ['--grid-template-areas'],
     responsive: true,
   },
@@ -81,7 +81,7 @@ const gridPropDefs = {
    */
   columns: {
     type: 'enum | string',
-    className: 'rt-r-gtc',
+    className: 'kui-r-gtc',
     customProperties: ['--grid-template-columns'],
     values: columnsValues,
     parseValue: parseGridValue,
@@ -103,7 +103,7 @@ const gridPropDefs = {
    */
   rows: {
     type: 'enum | string',
-    className: 'rt-r-gtr',
+    className: 'kui-r-gtr',
     customProperties: ['--grid-template-rows'],
     values: rowsValues,
     parseValue: parseGridValue,
@@ -122,7 +122,7 @@ const gridPropDefs = {
    */
   flow: {
     type: 'enum',
-    className: 'rt-r-gaf',
+    className: 'kui-r-gaf',
     values: flowValues,
     responsive: true,
   },
@@ -139,7 +139,7 @@ const gridPropDefs = {
    */
   align: {
     type: 'enum',
-    className: 'rt-r-ai',
+    className: 'kui-r-ai',
     values: alignValues,
     responsive: true,
   },
@@ -156,7 +156,7 @@ const gridPropDefs = {
    */
   justify: {
     type: 'enum',
-    className: 'rt-r-jc',
+    className: 'kui-r-jc',
     values: justifyValues,
     parseValue: parseJustifyValue,
     responsive: true,
@@ -174,7 +174,7 @@ const gridPropDefs = {
    */
   alignContent: {
     type: 'enum',
-    className: 'rt-r-ac',
+    className: 'kui-r-ac',
     values: alignContentValues,
     parseValue: parseAlignContentValue,
     responsive: true,
@@ -192,7 +192,7 @@ const gridPropDefs = {
    */
   justifyItems: {
     type: 'enum',
-    className: 'rt-r-ji',
+    className: 'kui-r-ji',
     values: justifyItemsValues,
     responsive: true,
   },

package/src/components/grid.tsx

@@ -26,7 +26,7 @@ const Grid = React.forwardRef<GridElement, GridProps>((props, forwardedRef) => {
     ...gridProps
   } = extractProps(props, gridPropDefs, layoutPropDefs, marginPropDefs);
   const Comp = asChild ? Slot : Tag;
-  return <Comp {...gridProps} ref={forwardedRef} className={classNames('rt-Grid', className)} />;
+  return <Comp {...gridProps} ref={forwardedRef} className={classNames('kui-Grid', className)} />;
 });
 Grid.displayName = 'Grid';
 

package/src/components/heading.css

@@ -1,4 +1,4 @@
-.rt-Heading {
+.kui-Heading {
   --leading-trim-start: var(--heading-leading-trim-start);
   --leading-trim-end: var(--heading-leading-trim-end);
   font-family: var(--heading-font-family);
@@ -7,13 +7,13 @@
   line-height: var(--line-height);
 
   /* `font` prop — all three resolve through the same tier-1 stacks. */
-  &:where(.rt-r-ff-sans) {
+  &:where(.kui-r-ff-sans) {
     font-family: var(--font-sans);
   }
-  &:where(.rt-r-ff-mono) {
+  &:where(.kui-r-ff-mono) {
     font-family: var(--font-mono);
   }
-  &:where(.rt-r-ff-serif) {
+  &:where(.kui-r-ff-serif) {
     font-family: var(--font-serif);
   }
 
@@ -22,22 +22,22 @@
   }
 
   /* Emphasis ladder. No colour and no emphasis sets nothing, so the colour is inherited. */
-  &:where(.rt-emphasis-loud) {
-    color: var(--gray-ink);
+  &:where(.kui-emphasis-loud) {
+    color: var(--neutral-ink);
   }
-  &:where(.rt-emphasis-medium) {
-    color: var(--gray-ink-muted);
+  &:where(.kui-emphasis-medium) {
+    color: var(--neutral-ink-muted);
   }
-  &:where(.rt-emphasis-quiet) {
-    color: var(--gray-ink-faint);
+  &:where(.kui-emphasis-quiet) {
+    color: var(--neutral-ink-faint);
   }
   &:where([data-accent-color]) {
     color: var(--accent-ink);
   }
-  &:where([data-accent-color].rt-emphasis-medium) {
+  &:where([data-accent-color].kui-emphasis-medium) {
     color: var(--accent-ink-muted);
   }
-  &:where([data-accent-color].rt-emphasis-quiet) {
+  &:where([data-accent-color].kui-emphasis-quiet) {
     color: var(--accent-ink-faint);
   }
 }
@@ -49,48 +49,48 @@
  ***************************************************************************************************/
 
 @breakpoints {
-  .rt-Heading {
-    &:where(.rt-r-size-1) {
+  .kui-Heading {
+    &:where(.kui-r-size-1) {
       font-size: calc(var(--font-size-1) * var(--heading-font-size-adjust));
       --line-height: var(--line-height-1);
       letter-spacing: calc(var(--letter-spacing-1) + var(--heading-letter-spacing));
     }
-    &:where(.rt-r-size-2) {
+    &:where(.kui-r-size-2) {
       font-size: calc(var(--font-size-2) * var(--heading-font-size-adjust));
       --line-height: var(--line-height-2);
       letter-spacing: calc(var(--letter-spacing-2) + var(--heading-letter-spacing));
     }
-    &:where(.rt-r-size-3) {
+    &:where(.kui-r-size-3) {
       font-size: calc(var(--font-size-3) * var(--heading-font-size-adjust));
       --line-height: var(--line-height-3);
       letter-spacing: calc(var(--letter-spacing-3) + var(--heading-letter-spacing));
     }
-    &:where(.rt-r-size-4) {
+    &:where(.kui-r-size-4) {
       font-size: calc(var(--font-size-4) * var(--heading-font-size-adjust));
       --line-height: var(--line-height-4);
       letter-spacing: calc(var(--letter-spacing-4) + var(--heading-letter-spacing));
     }
-    &:where(.rt-r-size-5) {
+    &:where(.kui-r-size-5) {
       font-size: calc(var(--font-size-5) * var(--heading-font-size-adjust));
       --line-height: var(--line-height-5);
       letter-spacing: calc(var(--letter-spacing-5) + var(--heading-letter-spacing));
     }
-    &:where(.rt-r-size-6) {
+    &:where(.kui-r-size-6) {
       font-size: calc(var(--font-size-6) * var(--heading-font-size-adjust));
       --line-height: var(--line-height-6);
       letter-spacing: calc(var(--letter-spacing-6) + var(--heading-letter-spacing));
     }
-    &:where(.rt-r-size-7) {
+    &:where(.kui-r-size-7) {
       font-size: calc(var(--font-size-7) * var(--heading-font-size-adjust));
       --line-height: var(--line-height-7);
       letter-spacing: calc(var(--letter-spacing-7) + var(--heading-letter-spacing));
     }
-    &:where(.rt-r-size-8) {
+    &:where(.kui-r-size-8) {
       font-size: calc(var(--font-size-8) * var(--heading-font-size-adjust));
       --line-height: var(--line-height-8);
       letter-spacing: calc(var(--letter-spacing-8) + var(--heading-letter-spacing));
     }
-    &:where(.rt-r-size-9) {
+    &:where(.kui-r-size-9) {
       font-size: calc(var(--font-size-9) * var(--heading-font-size-adjust));
       --line-height: var(--line-height-9);
       letter-spacing: calc(var(--letter-spacing-9) + var(--heading-letter-spacing));

package/src/components/heading.props.tsx

@@ -18,7 +18,7 @@ const headingPropDefs = {
   ...asChildPropDef,
   size: {
     type: 'enum',
-    className: 'rt-r-size',
+    className: 'kui-r-size',
     values: sizes,
     default: '6',
     responsive: true,

package/src/components/heading.tsx

@@ -3,15 +3,13 @@ import { Slot } from 'radix-ui';
 
 import { headingPropDefs } from './heading.props.js';
 import { extractProps } from '../helpers/extract-props.js';
-import { marginPropDefs } from '../props/margin.props.js';
 
-import type { MarginProps } from '../props/margin.props.js';
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 import type { GetPropDefTypes } from '../props/prop-def.js';
 
 type HeadingElement = React.ElementRef<'h1'>;
 type HeadingOwnProps = GetPropDefTypes<typeof headingPropDefs>;
-interface CommonHeadingProps extends MarginProps, HeadingOwnProps {}
+interface CommonHeadingProps extends HeadingOwnProps {}
 type HeadingH1Props = { as?: 'h1' } & ComponentPropsWithout<'h1', RemovedProps>;
 type HeadingH2Props = { as: 'h2' } & ComponentPropsWithout<'h2', RemovedProps>;
 type HeadingH3Props = { as: 'h3' } & ComponentPropsWithout<'h3', RemovedProps>;
@@ -22,7 +20,6 @@ type HeadingProps = CommonHeadingProps &
   (HeadingH1Props | HeadingH2Props | HeadingH3Props | HeadingH4Props | HeadingH5Props | HeadingH6Props);
 
 // Pre-merge prop definitions at module level to avoid per-render allocation
-const mergedPropDefs = { ...headingPropDefs, ...marginPropDefs };
 
 const Heading = React.memo(
   React.forwardRef<HeadingElement, HeadingProps>((props, forwardedRef) => {
@@ -33,9 +30,9 @@ const Heading = React.memo(
       as: Tag = 'h1',
       color,
       ...headingProps
-    } = extractProps(props, mergedPropDefs);
+    } = extractProps(props, headingPropDefs);
 
-    const combinedClassName = className ? `rt-Heading ${className}` : 'rt-Heading';
+    const combinedClassName = className ? `kui-Heading ${className}` : 'kui-Heading';
 
     if (asChild) {
       return (

package/src/components/index.css

@@ -1,40 +1,30 @@
 @import './reset.css';
 @import './layout.css';
 
-/* Import Skeleton before other components so that its default border-radius doesn’t have a higher specificity */
-@import './skeleton.css';
-
 /* Import Text before other components as it’s commonly extended */
 @import './text.css';
 
 @import './accordion.css';
 @import './alert-dialog.css';
 @import './avatar.css';
-@import './badge.css';
+/* Chip keeps Badge's place in the cascade. */
+@import './chip.css';
 @import './blockquote.css';
 @import './button.css';
 @import './card.css';
-@import './checkbox-cards.css';
 @import './checkbox-group.css';
 @import './checkbox.css';
 @import './code.css';
 @import './context-menu.css';
-@import './data-list.css';
 @import './dialog.css';
 @import './dropdown-menu.css';
 @import './combobox.css';
-@import './em.css';
 @import './heading.css';
-@import './hover-card.css';
-@import './icon-button.css';
-@import './image.css';
 @import './kbd.css';
 @import './link.css';
 @import './navbar.css';
 @import './popover.css';
 @import './progress.css';
-@import './quote.css';
-@import './radio-cards.css';
 @import './radio-group.css';
 @import './radio.css';
 @import './sheet.css';
@@ -46,14 +36,11 @@
 @import './shell.css';
 @import './slider.css';
 @import './spinner.css';
-@import './strong.css';
 @import './switch.css';
-@import './tab-nav.css';
 @import './table.css';
 @import './tabs.css';
 @import './text-area.css';
 @import './text-field.css';
-@import './theme-panel.css';
 @import './toolbar.css';
 @import './tooltip.css';
 @import './virtual-menu.css';
@@ -61,7 +48,7 @@
 @import './message-scroller.css';
 @import './notice.css';
 
-.radix-themes:where([data-is-root-theme='true']) {
+.kui-theme:where([data-is-root-theme='true']) {
   /* Create a new stacking context on the root `Theme` so layered components work out of the box */
   position: relative;
   z-index: 0;