@womp/kookie-ui 0.19.0 → 0.21.0

package/src/components/{badge.tsx → chip.tsx}

@@ -2,20 +2,18 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { Slot } from 'radix-ui';
 
-import { badgePropDefs } from './badge.props.js';
+import { chipPropDefs } from './chip.props.js';
 import { extractProps } from '../helpers/extract-props.js';
-import { marginPropDefs } from '../props/margin.props.js';
 import { Tooltip } from './tooltip.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 BadgeElement = React.ElementRef<'span'>;
-type BadgeOwnProps = GetPropDefTypes<typeof badgePropDefs>;
+type ChipElement = React.ElementRef<'span'>;
+type ChipOwnProps = GetPropDefTypes<typeof chipPropDefs>;
 
-// Tooltip props that can be passed to Badge
-interface BadgeTooltipProps {
+// Tooltip props that can be passed to Chip
+interface ChipTooltipProps {
   tooltip?: React.ReactNode;
   tooltipSide?: 'top' | 'right' | 'bottom' | 'left';
   tooltipAlign?: 'start' | 'center' | 'end';
@@ -23,13 +21,12 @@ interface BadgeTooltipProps {
   tooltipDisableHoverableContent?: boolean;
 }
 
-interface BadgeProps
+interface ChipProps
   extends ComponentPropsWithout<'span', RemovedProps>,
-    MarginProps,
-    BadgeOwnProps,
-    BadgeTooltipProps {}
+    ChipOwnProps,
+    ChipTooltipProps {}
 
-const Badge = React.forwardRef<BadgeElement, BadgeProps>((props, forwardedRef) => {
+const Chip = React.forwardRef<ChipElement, ChipProps>((props, forwardedRef) => {
   const {
     asChild,
     className,
@@ -41,29 +38,29 @@ const Badge = React.forwardRef<BadgeElement, BadgeProps>((props, forwardedRef) =
     tooltipAlign = 'center',
     tooltipDelayDuration,
     tooltipDisableHoverableContent,
-    ...badgeProps
-  } = extractProps(props, badgePropDefs, marginPropDefs);
+    ...chipProps
+  } = extractProps(props, chipPropDefs);
 
 
 
   // Memoize component variable to prevent unnecessary re-renders
   const Comp = React.useMemo(() => (asChild ? Slot.Root : 'span'), [asChild]);
 
-  const badge = (
+  const chip = (
     <Comp
       data-accent-color={color}
       data-radius={radius}
-      {...badgeProps}
+      {...chipProps}
       ref={forwardedRef}
-      className={classNames('rt-reset', 'rt-Badge', className)}
+      className={classNames('rt-reset', 'rt-Chip', className)}
     >
       {children}
     </Comp>
   );
 
-  // If no tooltip is provided, return the badge as-is
+  // If no tooltip is provided, return the chip as-is
   if (!tooltip) {
-    return badge;
+    return chip;
   }
 
   // Wrap with Tooltip when tooltip content is provided
@@ -75,11 +72,11 @@ const Badge = React.forwardRef<BadgeElement, BadgeProps>((props, forwardedRef) =
       delayDuration={tooltipDelayDuration}
       disableHoverableContent={tooltipDisableHoverableContent}
     >
-      {badge}
+      {chip}
     </Tooltip>
   );
 });
-Badge.displayName = 'Badge';
+Chip.displayName = 'Chip';
 
-export { Badge };
-export type { BadgeProps };
+export { Chip };
+export type { ChipProps };

package/src/components/code.css

@@ -2,9 +2,8 @@
 /* Disable selector-max-type rule to target individual element types. */
 
 .rt-Code {
-  --code-variant-font-size-adjust: calc(var(--code-font-size-adjust) * 0.95);
   font-family: var(--code-font-family);
-  font-size: calc(var(--code-variant-font-size-adjust) * 1em);
+  font-size: calc(var(--mono-scale) * 1em);
   font-style: var(--code-font-style);
   font-weight: var(--code-font-weight);
   line-height: 1.25;
@@ -33,71 +32,51 @@
 
 @breakpoints {
   .rt-Code {
-    &:where(.rt-r-size-0) {
-      font-size: calc(var(--font-size-0) * var(--code-variant-font-size-adjust));
-      line-height: var(--line-height-0);
-      --letter-spacing: var(--letter-spacing-0);
-    }
     &:where(.rt-r-size-1) {
-      font-size: calc(var(--font-size-1) * var(--code-variant-font-size-adjust));
+      font-size: calc(var(--font-size-1) * var(--mono-scale));
       line-height: var(--line-height-1);
       --letter-spacing: var(--letter-spacing-1);
     }
     &:where(.rt-r-size-2) {
-      font-size: calc(var(--font-size-2) * var(--code-variant-font-size-adjust));
+      font-size: calc(var(--font-size-2) * var(--mono-scale));
       line-height: var(--line-height-2);
       --letter-spacing: var(--letter-spacing-2);
     }
     &:where(.rt-r-size-3) {
-      font-size: calc(var(--font-size-3) * var(--code-variant-font-size-adjust));
+      font-size: calc(var(--font-size-3) * var(--mono-scale));
       line-height: var(--line-height-3);
       --letter-spacing: var(--letter-spacing-3);
     }
     &:where(.rt-r-size-4) {
-      font-size: calc(var(--font-size-4) * var(--code-variant-font-size-adjust));
+      font-size: calc(var(--font-size-4) * var(--mono-scale));
       line-height: var(--line-height-4);
       --letter-spacing: var(--letter-spacing-4);
     }
     &:where(.rt-r-size-5) {
-      font-size: calc(var(--font-size-5) * var(--code-variant-font-size-adjust));
+      font-size: calc(var(--font-size-5) * var(--mono-scale));
       line-height: var(--line-height-5);
       --letter-spacing: var(--letter-spacing-5);
     }
     &:where(.rt-r-size-6) {
-      font-size: calc(var(--font-size-6) * var(--code-variant-font-size-adjust));
+      font-size: calc(var(--font-size-6) * var(--mono-scale));
       line-height: var(--line-height-6);
       --letter-spacing: var(--letter-spacing-6);
     }
     &:where(.rt-r-size-7) {
-      font-size: calc(var(--font-size-7) * var(--code-variant-font-size-adjust));
+      font-size: calc(var(--font-size-7) * var(--mono-scale));
       line-height: var(--line-height-7);
       --letter-spacing: var(--letter-spacing-7);
     }
     &:where(.rt-r-size-8) {
-      font-size: calc(var(--font-size-8) * var(--code-variant-font-size-adjust));
+      font-size: calc(var(--font-size-8) * var(--mono-scale));
       line-height: var(--line-height-8);
       --letter-spacing: var(--letter-spacing-8);
     }
     &:where(.rt-r-size-9) {
-      font-size: calc(var(--font-size-9) * var(--code-variant-font-size-adjust));
+      font-size: calc(var(--font-size-9) * var(--mono-scale));
       line-height: var(--line-height-9);
       --letter-spacing: var(--letter-spacing-9);
     }
-    &:where(.rt-r-size-10) {
-      font-size: calc(var(--font-size-10) * var(--code-variant-font-size-adjust));
-      line-height: var(--line-height-10);
-      --letter-spacing: var(--letter-spacing-10);
-    }
-    &:where(.rt-r-size-11) {
-      font-size: calc(var(--font-size-11) * var(--code-variant-font-size-adjust));
-      line-height: var(--line-height-11);
-      --letter-spacing: var(--letter-spacing-11);
-    }
-    &:where(.rt-r-size-12) {
-      font-size: calc(var(--font-size-12) * var(--code-variant-font-size-adjust));
-      line-height: var(--line-height-12);
-      --letter-spacing: var(--letter-spacing-12);
-    }
   }
 }
 
@@ -110,7 +89,6 @@
 /* ghost */
 
 .rt-Code:where(.rt-variant-ghost) {
-  --code-variant-font-size-adjust: var(--code-font-size-adjust);
   padding: 0;
 
   /* Same ladder as Text. No colour and no emphasis inherits the surrounding colour. */

package/src/components/code.props.tsx

@@ -7,7 +7,7 @@ import { weightPropDef } from '../props/weight.prop.js';
 
 import type { PropDef } from '../props/prop-def.js';
 
-const sizes = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] as const;
+const sizes = ['1', '2', '3', '4', '5', '6', '7', '8', '9'] as const;
 const variants = ['solid', 'soft', 'outline', 'ghost'] as const;
 
 const codePropDefs = {

package/src/components/code.tsx

@@ -4,9 +4,7 @@ import { Slot } from 'radix-ui';
 
 import { codePropDefs } from './code.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';
 
@@ -14,13 +12,11 @@ type CodeElement = React.ElementRef<'code'>;
 type CodeOwnProps = GetPropDefTypes<typeof codePropDefs>;
 interface CodeProps
   extends ComponentPropsWithout<'code', RemovedProps>,
-    MarginProps,
     CodeOwnProps {}
 const Code = React.forwardRef<CodeElement, CodeProps>((props, forwardedRef) => {
   const { asChild, className, color, ...codeProps } = extractProps(
     props,
     codePropDefs,
-    marginPropDefs,
   );
   // Code ghost color prop should work as text color by default
   const resolvedColor = props.variant === 'ghost' ? color || undefined : color;

package/src/components/combobox.css

@@ -66,15 +66,6 @@
   cursor: var(--cursor-menu-item);
 }
 
-/* Room for the check indicator on every size */
-.rt-BaseMenuContent:where(.rt-r-size-1) :where(.rt-ComboboxItem, .rt-ComboboxLabel) {
-  --base-menu-item-padding-left: calc(var(--space-6) / 1.2);
-}
-
-.rt-BaseMenuContent:where(.rt-r-size-2, .rt-r-size-3) :where(.rt-ComboboxItem, .rt-ComboboxLabel) {
-  --base-menu-item-padding-left: var(--space-6);
-}
-
 /* Search row: shares the surface background, no second panel */
 .rt-ComboboxSearch {
   padding: var(--base-menu-content-padding);
@@ -132,8 +123,8 @@
     color: var(--accent-solid-contrast);
   }
 
-  /* Muted text follows the highlight colour. Badges keep their own colours. */
-  :where(.rt-BaseMenuContent.rt-variant-soft) .rt-ComboboxItem:where([data-selected='true']) :where(.rt-Text, [data-accent-color='gray']:not(.rt-Badge)) {
+  /* Muted text follows the highlight colour. Chips keep their own colours. */
+  :where(.rt-BaseMenuContent.rt-variant-soft) .rt-ComboboxItem:where([data-selected='true']) :where(.rt-Text, [data-accent-color='gray']:not(.rt-Chip)) {
     color: inherit;
   }
 }

package/src/components/combobox.props.tsx

@@ -42,7 +42,7 @@ const comboboxTriggerPropDefs = {
 };
 
 // The list is a menu, and menus stop at size 3.
-const contentSizes = ['1', '2', '3'] as const;
+const contentSizes = ['1', '2', '3', '4'] as const;
 
 /**
  * Styling props for the dropdown surface rendered by Combobox.Content.

package/src/components/combobox.tsx

@@ -27,7 +27,6 @@ import { Command as CommandPrimitive, useCommandState } from 'cmdk';
 import { extractProps } from '../helpers/extract-props.js';
 import { useThemeSize } from '../helpers/theme-size.js';
 import { comboboxRootPropDefs, comboboxTriggerPropDefs, comboboxContentPropDefs } from './combobox.props.js';
-import { marginPropDefs } from '../props/margin.props.js';
 import { ChevronDownIcon, ThickCheckIcon } from './icons.js';
 import { Theme, useThemeContext } from './theme.js';
 import { requireReactElement } from '../helpers/require-react-element.js';
@@ -36,7 +35,6 @@ import { Slottable } from './slot.js';
 import { VisuallyHidden } from './visually-hidden.js';
 
 import type { textFieldRootPropDefs } from './text-field.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';
 
@@ -319,7 +317,7 @@ ComboboxRoot.displayName = 'Combobox.Root';
 type ComboboxTriggerElement = HTMLButtonElement;
 type ComboboxTriggerOwnProps = GetPropDefTypes<typeof comboboxTriggerPropDefs>;
 type NativeTriggerProps = Omit<React.ComponentPropsWithoutRef<'button'>, 'color'>;
-interface ComboboxTriggerProps extends NativeTriggerProps, MarginProps, ComboboxTriggerOwnProps {}
+interface ComboboxTriggerProps extends NativeTriggerProps, ComboboxTriggerOwnProps {}
 
 const ComboboxTrigger = React.forwardRef<ComboboxTriggerElement, ComboboxTriggerProps>((props, forwardedRef) => {
   const ctx = useComboboxContext('Trigger');
@@ -338,7 +336,7 @@ const ComboboxTrigger = React.forwardRef<ComboboxTriggerElement, ComboboxTrigger
     onKeyDown,
     type: buttonType,
     ...triggerProps
-  } = extractProps({ size: ctx.size, ...props }, triggerSizingPropDefs, comboboxTriggerPropDefs, marginPropDefs);
+  } = extractProps({ size: ctx.size, ...props }, triggerSizingPropDefs, comboboxTriggerPropDefs);
 
   const isDisabled = disabled ?? ctx.disabled;
   const resolvedColor = color ?? ctx.color;

package/src/components/dialog.tsx

@@ -165,7 +165,7 @@ type DialogTitleProps = ComponentPropsWithout<typeof Heading, 'asChild'>;
 const DialogTitle = React.forwardRef<DialogTitleElement, DialogTitleProps>(
   (props, forwardedRef) => (
     <DialogPrimitive.Title asChild>
-      <Heading size="5" mb="4" trim="start" {...props} asChild={false} ref={forwardedRef} />
+      <Heading size="5" trim="start" {...props} asChild={false} ref={forwardedRef} />
     </DialogPrimitive.Title>
   ),
 );

package/src/components/dropdown-menu.css

@@ -21,25 +21,25 @@
 
 @breakpoints {
   /* Size 1 Button */
-  .rt-Button:where(.rt-r-size-1) :where(.rt-DropdownMenuTriggerIcon) {
+  .rt-Button:where(:not([data-icon-only]).rt-r-size-1) :where(.rt-DropdownMenuTriggerIcon) {
     width: var(--trigger-icon-size-1);
     height: var(--trigger-icon-size-1);
   }
 
   /* Size 2 Button */
-  .rt-Button:where(.rt-r-size-2) :where(.rt-DropdownMenuTriggerIcon) {
+  .rt-Button:where(:not([data-icon-only]).rt-r-size-2) :where(.rt-DropdownMenuTriggerIcon) {
     width: var(--trigger-icon-size-2);
     height: var(--trigger-icon-size-2);
   }
 
   /* Size 3 Button */
-  .rt-Button:where(.rt-r-size-3) :where(.rt-DropdownMenuTriggerIcon) {
+  .rt-Button:where(:not([data-icon-only]).rt-r-size-3) :where(.rt-DropdownMenuTriggerIcon) {
     width: var(--trigger-icon-size-3);
     height: var(--trigger-icon-size-3);
   }
 
   /* Size 4 Button */
-  .rt-Button:where(.rt-r-size-4) :where(.rt-DropdownMenuTriggerIcon) {
+  .rt-Button:where(:not([data-icon-only]).rt-r-size-4) :where(.rt-DropdownMenuTriggerIcon) {
     width: var(--trigger-icon-size-4);
     height: var(--trigger-icon-size-4);
   }

package/src/components/heading.css

@@ -50,70 +50,50 @@
 
 @breakpoints {
   .rt-Heading {
-    &:where(.rt-r-size-0) {
-      font-size: calc(var(--font-size-0) * var(--heading-font-size-adjust));
-      --line-height: var(--heading-line-height-0);
-      letter-spacing: calc(var(--letter-spacing-0) + var(--heading-letter-spacing));
-    }
     &:where(.rt-r-size-1) {
       font-size: calc(var(--font-size-1) * var(--heading-font-size-adjust));
-      --line-height: var(--heading-line-height-1);
+      --line-height: var(--line-height-1);
       letter-spacing: calc(var(--letter-spacing-1) + var(--heading-letter-spacing));
     }
     &:where(.rt-r-size-2) {
       font-size: calc(var(--font-size-2) * var(--heading-font-size-adjust));
-      --line-height: var(--heading-line-height-2);
+      --line-height: var(--line-height-2);
       letter-spacing: calc(var(--letter-spacing-2) + var(--heading-letter-spacing));
     }
     &:where(.rt-r-size-3) {
       font-size: calc(var(--font-size-3) * var(--heading-font-size-adjust));
-      --line-height: var(--heading-line-height-3);
+      --line-height: var(--line-height-3);
       letter-spacing: calc(var(--letter-spacing-3) + var(--heading-letter-spacing));
     }
     &:where(.rt-r-size-4) {
       font-size: calc(var(--font-size-4) * var(--heading-font-size-adjust));
-      --line-height: var(--heading-line-height-4);
+      --line-height: var(--line-height-4);
       letter-spacing: calc(var(--letter-spacing-4) + var(--heading-letter-spacing));
     }
     &:where(.rt-r-size-5) {
       font-size: calc(var(--font-size-5) * var(--heading-font-size-adjust));
-      --line-height: var(--heading-line-height-5);
+      --line-height: var(--line-height-5);
       letter-spacing: calc(var(--letter-spacing-5) + var(--heading-letter-spacing));
     }
     &:where(.rt-r-size-6) {
       font-size: calc(var(--font-size-6) * var(--heading-font-size-adjust));
-      --line-height: var(--heading-line-height-6);
+      --line-height: var(--line-height-6);
       letter-spacing: calc(var(--letter-spacing-6) + var(--heading-letter-spacing));
     }
     &:where(.rt-r-size-7) {
       font-size: calc(var(--font-size-7) * var(--heading-font-size-adjust));
-      --line-height: var(--heading-line-height-7);
+      --line-height: var(--line-height-7);
       letter-spacing: calc(var(--letter-spacing-7) + var(--heading-letter-spacing));
     }
     &:where(.rt-r-size-8) {
       font-size: calc(var(--font-size-8) * var(--heading-font-size-adjust));
-      --line-height: var(--heading-line-height-8);
+      --line-height: var(--line-height-8);
       letter-spacing: calc(var(--letter-spacing-8) + var(--heading-letter-spacing));
     }
     &:where(.rt-r-size-9) {
       font-size: calc(var(--font-size-9) * var(--heading-font-size-adjust));
-      --line-height: var(--heading-line-height-9);
+      --line-height: var(--line-height-9);
       letter-spacing: calc(var(--letter-spacing-9) + var(--heading-letter-spacing));
     }
-    &:where(.rt-r-size-10) {
-      font-size: calc(var(--font-size-10) * var(--heading-font-size-adjust));
-      --line-height: var(--heading-line-height-10);
-      letter-spacing: calc(var(--letter-spacing-10) + var(--heading-letter-spacing));
-    }
-    &:where(.rt-r-size-11) {
-      font-size: calc(var(--font-size-11) * var(--heading-font-size-adjust));
-      --line-height: var(--heading-line-height-11);
-      letter-spacing: calc(var(--letter-spacing-11) + var(--heading-letter-spacing));
-    }
-    &:where(.rt-r-size-12) {
-      font-size: calc(var(--font-size-12) * var(--heading-font-size-adjust));
-      --line-height: var(--heading-line-height-12);
-      letter-spacing: calc(var(--letter-spacing-12) + var(--heading-letter-spacing));
-    }
   }
 }

package/src/components/heading.props.tsx

@@ -11,7 +11,7 @@ import { weightPropDef } from '../props/weight.prop.js';
 import type { PropDef } from '../props/prop-def.js';
 
 const as = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const;
-const sizes = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] as const;
+const sizes = ['1', '2', '3', '4', '5', '6', '7', '8', '9'] as const;
 
 const headingPropDefs = {
   as: { type: 'enum', values: as, default: 'h1' },

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,7 +30,7 @@ const Heading = React.memo(
       as: Tag = 'h1',
       color,
       ...headingProps
-    } = extractProps(props, mergedPropDefs);
+    } = extractProps(props, headingPropDefs);
 
     const combinedClassName = className ? `rt-Heading ${className}` : 'rt-Heading';
 

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';

package/src/components/index.tsx

@@ -1,29 +1,22 @@
 export { AccessibleIcon, type AccessibleIconProps } from './accessible-icon.js';
 export * as Accordion from './accordion.js';
 export * as AlertDialog from './alert-dialog.js';
-export { AspectRatio, type AspectRatioProps } from './aspect-ratio.js';
 export { Avatar, type AvatarProps } from './avatar.js';
-export { Badge, type BadgeProps } from './badge.js';
 export { Blockquote, type BlockquoteProps } from './blockquote.js';
 export { Box, type BoxProps } from './box.js';
 export { Button, type ButtonProps } from './button.js';
 export { Card, type CardProps } from './card.js';
-export * as CheckboxCards from './checkbox-cards.js';
 export * as CheckboxGroup from './checkbox-group.js';
 export { Checkbox, type CheckboxProps } from './checkbox.js';
+export { Chip, type ChipProps } from './chip.js';
 export { Code, type CodeProps } from './code.js';
-export { Container, type ContainerProps } from './container.js';
 export * as ContextMenu from './context-menu.js';
-export * as DataList from './data-list.js';
 export * as Dialog from './dialog.js';
 export * as DropdownMenu from './dropdown-menu.js';
 export * as Combobox from './combobox.js';
-export { Em, type EmProps } from './em.js';
 export { Flex, type FlexProps } from './flex.js';
 export { Grid, type GridProps } from './grid.js';
 export { Heading, type HeadingProps } from './heading.js';
-export * as HoverCard from './hover-card.js';
-export { IconButton, type IconButtonProps } from './icon-button.js';
 export {
   type IconProps,
   ChevronDownIcon,
@@ -31,44 +24,30 @@ export {
   ThickChevronRightIcon,
   ThickDividerHorizontalIcon,
 } from './icons.js';
-export { Image, type ImageProps } from './image.js';
 export { Kbd, type KbdProps } from './kbd.js';
 export { Link, type LinkProps } from './link.js';
 export * as Navbar from './navbar.js';
 export * as Popover from './popover.js';
 export { Portal, type PortalProps } from './portal.js';
 export { Progress, type ProgressProps } from './progress.js';
-export { Quote, type QuoteProps } from './quote.js';
-export * as RadioCards from './radio-cards.js';
 export * as RadioGroup from './radio-group.js';
 export { Radio, type RadioProps } from './radio.js';
 export { Reset, type ResetProps } from './reset.js';
 export { ScrollArea, type ScrollAreaProps } from './scroll-area.js';
 export * as SegmentedControl from './segmented-control.js';
-export { Section, type SectionProps } from './section.js';
 export * as Select from './select.js';
 export { Separator, type SeparatorProps } from './separator.js';
-export { Skeleton, type SkeletonProps } from './skeleton.js';
 export { Slider, type SliderProps } from './slider.js';
 export { Slot, Slottable } from './slot.js';
 export { Spinner, type SpinnerProps } from './spinner.js';
-export { Strong, type StrongProps } from './strong.js';
 export { Switch, type SwitchProps } from './switch.js';
-export * as TabNav from './tab-nav.js';
 export * as Table from './table.js';
 export * as Tabs from './tabs.js';
 export { TextArea, type TextAreaProps } from './text-area.js';
 export * as TextField from './text-field.js';
 export { Text, type TextProps } from './text.js';
-export {
-  ThemePanel,
-  ThemePanelContent,
-  type ThemePanelProps,
-  type ThemePanelContentProps,
-} from './theme-panel.js';
 export { Theme, ThemeContext, type ThemeContextValue, type ThemeProps, useThemeContext } from './theme.js';
-export { ToggleButton, type ToggleButtonProps } from './toggle-button.js';
-export { ToggleIconButton, type ToggleIconButtonProps } from './toggle-icon-button.js';
+export { Toggle, type ToggleProps } from './toggle.js';
 export {
   Toolbar,
   ToolbarGroup,

package/src/components/kbd.css

@@ -22,7 +22,7 @@
   word-spacing: var(--raised-word-spacing);
   border-radius: var(--radius-control-2);
   
-  /* Default sizing (size 2) */
+  /* No size prop: the size-1 box */
   font-size: var(--font-size-1);
   line-height: var(--line-height-1);
   letter-spacing: var(--letter-spacing-1);
@@ -136,13 +136,6 @@
 
 @breakpoints {
   .rt-Kbd {
-    &:where(.rt-r-size-0) {
-      font-size: var(--font-size-0);
-      line-height: var(--line-height-0);
-      letter-spacing: var(--letter-spacing-0);
-      padding: calc(var(--space-2) * 0.5) calc(var(--space-2) * 1.5);
-      border-radius: var(--radius-control-1);
-    }
     &:where(.rt-r-size-1) {
       font-size: var(--font-size-1);
       line-height: var(--line-height-1);
@@ -206,26 +199,5 @@
       padding: calc(var(--space-3) * 1.75) calc(var(--space-5) * 1.5);
       border-radius: var(--radius-control-4);
     }
-    &:where(.rt-r-size-10) {
-      font-size: var(--font-size-10);
-      line-height: var(--line-height-10);
-      letter-spacing: var(--letter-spacing-10);
-      padding: calc(var(--space-3) * 2.0) calc(var(--space-5) * 1.75);
-      border-radius: var(--radius-control-4);
-    }
-    &:where(.rt-r-size-11) {
-      font-size: var(--font-size-11);
-      line-height: var(--line-height-11);
-      letter-spacing: var(--letter-spacing-11);
-      padding: calc(var(--space-3) * 2.25) calc(var(--space-5) * 2.0);
-      border-radius: var(--radius-control-4);
-    }
-    &:where(.rt-r-size-12) {
-      font-size: var(--font-size-12);
-      line-height: var(--line-height-12);
-      letter-spacing: var(--letter-spacing-12);
-      padding: calc(var(--space-3) * 2.5) calc(var(--space-5) * 2.25);
-      border-radius: var(--radius-control-4);
-    }
   }
 }