@womp/kookie-ui 0.17.0 → 0.19.0

package/src/components/checkbox-cards.css

@@ -51,8 +51,6 @@
 /*                                     */
 /* * * * * * * * * * * * * * * * * * * */
 
-
-
 @breakpoints {
   .rt-CheckboxCardsRoot {
     /* Size 1 */
@@ -61,17 +59,15 @@
       --line-height: var(--line-height-2);
       --letter-spacing: var(--letter-spacing-2);
       /* keep in sync with checkbox */
-      --checkbox-cards-item-checkbox-size: calc(var(--space-5) * var(--spacing-multiplier-medium));
+      --checkbox-cards-item-checkbox-size: var(--mark-1, calc(16px * var(--scale)));
     }
-    
-
     /* Size 2 */
     &:where(.rt-r-size-2) {
       font-size: var(--font-size-2);
       --line-height: var(--line-height-2);
       --letter-spacing: var(--letter-spacing-2);
       /* keep in sync with checkbox */
-      --checkbox-cards-item-checkbox-size: var(--space-5);
+      --checkbox-cards-item-checkbox-size: var(--mark-2, calc(20px * var(--scale)));
     }
     /* Size 3 */
     &:where(.rt-r-size-3) {
@@ -79,7 +75,7 @@
       --line-height: var(--line-height-3);
       --letter-spacing: var(--letter-spacing-3);
       /* keep in sync with checkbox */
-      --checkbox-cards-item-checkbox-size: calc(var(--space-5) * var(--spacing-multiplier-large));
+      --checkbox-cards-item-checkbox-size: var(--mark-3, calc(24px * var(--scale)));
     }
     /* Size 4 */
     &:where(.rt-r-size-4) {
@@ -87,21 +83,11 @@
       --line-height: var(--line-height-3);
       --letter-spacing: var(--letter-spacing-3);
       /* keep in sync with checkbox */
-      --checkbox-cards-item-checkbox-size: calc(var(--space-5) * var(--spacing-multiplier-large));
-    }
-    /* Size 5 */
-    &:where(.rt-r-size-5) {
-      font-size: var(--font-size-4);
-      --line-height: var(--line-height-4);
-      --letter-spacing: var(--letter-spacing-4);
-      /* keep in sync with checkbox */
-      --checkbox-cards-item-checkbox-size: calc(var(--space-6) * var(--spacing-multiplier-medium));
+      --checkbox-cards-item-checkbox-size: var(--mark-4, calc(26px * var(--scale)));
     }
   }
 }
 
-
-
 /* * * * * * * * * * * * * * * * * * * */
 /*                                     */
 /*         All tap highlights          */
@@ -136,33 +122,3 @@
     background-color: var(--gray-a5);
   }
 }
-
-/*
- * Pin the item shell to the control channel.
- *
- * These are selection controls that happen to be card-shaped, not surfaces:
- * they sit in a row of choices and read as one large target each. Inheriting
- * BaseCard's damped surface radius made them square off while every other
- * control in the same form stayed round, so they take the control channel
- * instead — the same formulas BaseCard used before the surface split. The
- * mark inside keeps its own radius.
- */
-@breakpoints {
-  .rt-CheckboxCardsItem {
-    &:where(.rt-r-size-1) {
-      --base-card-border-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-2)));
-    }
-    &:where(.rt-r-size-2) {
-      --base-card-border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-3)));
-    }
-    &:where(.rt-r-size-3) {
-      --base-card-border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-4)));
-    }
-    &:where(.rt-r-size-4) {
-      --base-card-border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-5)));
-    }
-    &:where(.rt-r-size-5) {
-      --base-card-border-radius: min(var(--radius-9), calc(var(--radius-5) + var(--space-6)));
-    }
-  }
-}

package/src/components/checkbox-cards.props.tsx

@@ -5,12 +5,13 @@ import { gridPropDefs } from './grid.props.js';
 
 import type { PropDef } from '../props/prop-def.js';
 
-const sizes = ['1', '2', '3', '4', '5'] as const;
+const sizes = ['1', '2', '3', '4'] as const;
 // The same list as Card: a selectable card looks like any other card.
 const variants = cardPropDefs.variant.values;
 
 const checkboxCardsRootPropDefs = {
   ...asChildPropDef,
+  /** The Card surface ladder: padding --surface-p-N, corner --radius-surface-N. Unset, it follows the Theme size. */
   size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
   variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'raised' },
   ...colorPropDef,

package/src/components/checkbox-cards.tsx

@@ -11,6 +11,7 @@ import { baseCheckboxPropDefs } from './_internal/base-checkbox.props.js';
 import { Grid } from './grid.js';
 import { ThickCheckIcon } from './icons.js';
 import { extractProps } from '../helpers/extract-props.js';
+import { useThemeSizeProps } from '../helpers/theme-size.js';
 import { marginPropDefs } from '../props/margin.props.js';
 
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
@@ -43,7 +44,8 @@ interface CheckboxCardsRootProps
     MarginProps,
     CheckboxCardsRootOwnProps {}
 const CheckboxCardsRoot = React.forwardRef<CheckboxCardsRootElement, CheckboxCardsRootProps>(
-  (props: ScopedProps<CheckboxCardsRootProps>, forwardedRef) => {
+  (ownProps: ScopedProps<CheckboxCardsRootProps>, forwardedRef) => {
+    const props = useThemeSizeProps(ownProps, checkboxCardsRootPropDefs.size);
     const {
       __scopeCheckboxCards,
       className,
@@ -54,7 +56,7 @@ const CheckboxCardsRoot = React.forwardRef<CheckboxCardsRootElement, CheckboxCar
     return (
       <CheckboxCardsProvider
         scope={__scopeCheckboxCards}
-        size={props.size}
+        size={props.size ?? checkboxCardsRootPropDefs.size.default}
         variant={props.variant}
       >
         <Grid asChild>
@@ -93,7 +95,11 @@ const CheckboxCardsItem = React.forwardRef<
     baseCheckboxPropDefs,
   );
   const variantClass = context?.variant ? `rt-variant-${context.variant}` : undefined;
-  const sizeClass = context?.size ? `rt-r-size-${context.size}` : undefined;
+  // extractProps writes the responsive size classes (`md:rt-r-size-3`) a template string cannot.
+  const { className: sizeClass } = extractProps(
+    { size: context?.size },
+    { size: checkboxCardsRootPropDefs.size },
+  );
 
   return (
     <label

package/src/components/checkbox-group.css

@@ -12,20 +12,15 @@
   width: fit-content;
 }
 
+/* The disabled cursor lives in the base mark. */
 .rt-CheckboxGroupItemCheckbox {
-  &:where(:focus-visible) {
-    &::before {
-      outline: 2px solid var(--focus-8);
-      outline-offset: 2px;
-    }
+  &:where(:focus-visible)::before {
+    outline: var(--focus-ring-width, 2px) solid var(--focus-8);
+    outline-offset: var(--focus-ring-offset, 2px);
   }
 
-  &:where(:disabled) {
-    cursor: var(--cursor-disabled);
-
-    &::before {
-      background-color: var(--gray-a3);
-    }
+  &:where(:disabled)::before {
+    background-color: var(--gray-a3);
   }
 }
 

package/src/components/checkbox-group.tsx

@@ -10,6 +10,7 @@ import { checkboxGroupRootPropDefs } from './checkbox-group.props.js';
 import { ThickCheckIcon } from './icons.js';
 import { Text } from './text.js';
 import { extractProps } from '../helpers/extract-props.js';
+import { useThemeSize } from '../helpers/theme-size.js';
 import { marginPropDefs } from '../props/margin.props.js';
 
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
@@ -42,12 +43,13 @@ const CheckboxGroupRoot = React.forwardRef<CheckboxGroupRootElement, CheckboxGro
   (
     {
       color = checkboxGroupRootPropDefs.color.default,
-      size = checkboxGroupRootPropDefs.size.default,
+      size: sizeProp,
       variant = checkboxGroupRootPropDefs.variant.default,
       ...props
     }: ScopedProps<CheckboxGroupRootProps>,
     forwardedRef,
   ) => {
+    const size = useThemeSize(sizeProp, checkboxGroupRootPropDefs.size);
     const { __scopeCheckboxGroup, className, ...rootProps } = extractProps(props, marginPropDefs);
     const checkboxGroupScope = useCheckboxGroupScope(__scopeCheckboxGroup);
     return (

package/src/components/checkbox.css

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

package/src/components/checkbox.tsx

@@ -8,6 +8,7 @@ import { useControllableState } from 'radix-ui/internal';
 import { checkboxPropDefs } from './checkbox.props.js';
 import { ThickCheckIcon, ThickDividerHorizontalIcon } from './icons.js';
 import { extractProps } from '../helpers/extract-props.js';
+import { useThemeSizeProps } from '../helpers/theme-size.js';
 import { marginPropDefs } from '../props/margin.props.js';
 
 import type { MarginProps } from '../props/margin.props.js';
@@ -23,7 +24,8 @@ interface CheckboxProps
     >,
     MarginProps,
     CheckboxOwnProps {}
-const Checkbox = React.forwardRef<CheckboxElement, CheckboxProps>((props, forwardedRef) => {
+const Checkbox = React.forwardRef<CheckboxElement, CheckboxProps>((ownProps, forwardedRef) => {
+  const props = useThemeSizeProps(ownProps, checkboxPropDefs.size);
   const {
     className,
     color,

package/src/components/combobox.tsx

@@ -25,6 +25,7 @@ import { useCallbackRef, useComposedRefs, useControllableState, useLayoutEffect
 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';
@@ -206,7 +207,7 @@ function readElementLabel(el: HTMLElement): string | undefined {
 const ComboboxRoot: React.FC<ComboboxRootProps> = (props) => {
   const {
     children,
-    size = comboboxRootPropDefs.size.default,
+    size: sizeProp,
     value: valueProp,
     defaultValue = null,
     onValueChange,
@@ -228,6 +229,7 @@ const ComboboxRoot: React.FC<ComboboxRootProps> = (props) => {
     displayValue: displayValueProp,
     ...rootProps
   } = props;
+  const size = useThemeSize(sizeProp, comboboxRootPropDefs.size);
 
   const [open, setOpen] = useControllableState({
     prop: openProp,

package/src/components/context-menu.tsx

@@ -21,6 +21,7 @@ import {
 import { Theme, useThemeContext } from './theme.js';
 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 {
@@ -76,7 +77,8 @@ interface ContextMenuContentProps
   submenuBehavior?: Responsive<'cascade' | 'drill-down'>;
 }
 const ContextMenuContent = React.forwardRef<ContextMenuContentElement, ContextMenuContentProps>(
-  (props, forwardedRef) => {
+  (ownProps, forwardedRef) => {
+    const props = useThemeSizeProps(ownProps, contextMenuContentPropDefs.size);
     const themeContext = useThemeContext();
     const {
       size = contextMenuContentPropDefs.size.default,

package/src/components/data-list.tsx

@@ -8,6 +8,7 @@ import {
   dataListLabelPropDefs,
 } from './data-list.props.js';
 import { extractProps } from '../helpers/extract-props.js';
+import { useThemeSizeProps } from '../helpers/theme-size.js';
 import { marginPropDefs } from '../props/margin.props.js';
 
 import type { MarginProps } from '../props/margin.props.js';
@@ -21,7 +22,8 @@ interface DataListRootProps
     MarginProps,
     DataListRootOwnProps {}
 const DataListRoot = React.forwardRef<DataListRootElement, DataListRootProps>(
-  (props, forwardedRef) => {
+  (ownProps, forwardedRef) => {
+    const props = useThemeSizeProps(ownProps, dataListRootPropDefs.size);
     const { className, ...dataListProps } = extractProps(
       props,
       dataListRootPropDefs,

package/src/components/dialog.css

@@ -1 +1,5 @@
 @import './_internal/base-dialog.css';
+
+.rt-DialogContent {
+  max-width: var(--overlay-w);
+}

package/src/components/dialog.props.tsx

@@ -20,12 +20,13 @@ const dialogContentPropDefs = {
     type: 'enum',
     className: 'rt-r-size',
     values: contentSizes,
-    default: '3',
+    default: '2',
     responsive: true,
   },
   width: widthPropDefs.width,
   minWidth: widthPropDefs.minWidth,
-  maxWidth: { ...widthPropDefs.maxWidth, default: '600px' },
+  // No default: the size's --overlay-w is the max width until a maxWidth is given.
+  maxWidth: widthPropDefs.maxWidth,
   ...heightPropDefs,
 } satisfies {
   align: PropDef<(typeof alignValues)[number]>;

package/src/components/dialog.tsx

@@ -7,6 +7,7 @@ import { Heading } from './heading.js';
 import { Text } from './text.js';
 import { Theme } from './theme.js';
 import { extractProps } from '../helpers/extract-props.js';
+import { useThemeSizeProps } from '../helpers/theme-size.js';
 import { requireReactElement } from '../helpers/require-react-element.js';
 import { useBodyPointerEventsCleanup } from '../hooks/use-body-pointer-events-cleanup.js';
 
@@ -49,7 +50,8 @@ interface DialogContentProps
   container?: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Portal>['container'];
 }
 const DialogContent = React.forwardRef<DialogContentElement, DialogContentProps>(
-  ({ align, ...props }, forwardedRef) => {
+  ({ align, ...ownProps }, forwardedRef) => {
+    const props = useThemeSizeProps(ownProps, contentPropDefs.size);
     const { className: alignClassName } = extractProps({ align }, alignPropDefs);
 
     const {

package/src/components/dropdown-menu.tsx

@@ -18,6 +18,7 @@ import {
 import { Theme, useThemeContext } from './theme.js';
 import { ChevronDownIcon, ThickCheckIcon, ThickChevronLeftIcon, ThickChevronRightIcon, ThickDotIcon } from './icons.js';
 import { extractProps } from '../helpers/extract-props.js';
+import { useThemeSizeProps } from '../helpers/theme-size.js';
 import {
   DrillDownLevelContext,
   DrillDownRoot,
@@ -128,7 +129,8 @@ interface DropdownMenuContentProps
   virtualized?: boolean;
 }
 const DropdownMenuContent = React.forwardRef<DropdownMenuContentElement, DropdownMenuContentProps>(
-  (props, forwardedRef) => {
+  (ownProps, forwardedRef) => {
+    const props = useThemeSizeProps(ownProps, dropdownMenuContentPropDefs.size);
     const themeContext = useThemeContext();
     const {
       size = dropdownMenuContentPropDefs.size.default,

package/src/components/hover-card.css

@@ -5,10 +5,6 @@
   position: relative;
   z-index: 200; /* Above dialogs (100) so hover cards inside dialogs/sheets work */
 
-  --inset-padding-top: var(--hover-card-content-padding);
-  --inset-padding-right: var(--hover-card-content-padding);
-  --inset-padding-bottom: var(--hover-card-content-padding);
-  --inset-padding-left: var(--hover-card-content-padding);
   padding: var(--hover-card-content-padding);
   box-sizing: border-box;
 
@@ -24,16 +20,20 @@
 @breakpoints {
   .rt-HoverCardContent {
     &:where(.rt-r-size-1) {
-      --hover-card-content-padding: var(--space-4);
-      border-radius: var(--radius-surface-4);
+      --hover-card-content-padding: var(--surface-p-1);
+      border-radius: var(--radius-surface-1);
     }
     &:where(.rt-r-size-2) {
-      --hover-card-content-padding: var(--space-5);
-      border-radius: var(--radius-surface-4);
+      --hover-card-content-padding: var(--surface-p-2);
+      border-radius: var(--radius-surface-2);
     }
     &:where(.rt-r-size-3) {
-      --hover-card-content-padding: var(--space-6);
-      border-radius: var(--radius-surface-5);
+      --hover-card-content-padding: var(--surface-p-3);
+      border-radius: var(--radius-surface-3);
+    }
+    &:where(.rt-r-size-4) {
+      --hover-card-content-padding: var(--surface-p-4);
+      border-radius: var(--radius-surface-4);
     }
   }
 }

package/src/components/hover-card.props.tsx

@@ -4,7 +4,7 @@ import { widthPropDefs } from '../props/width.props.js';
 
 import type { PropDef, GetPropDefTypes } from '../props/prop-def.js';
 
-const contentSizes = ['1', '2', '3'] as const;
+const contentSizes = ['1', '2', '3', '4'] as const;
 
 const hoverCardContentPropDefs = {
   ...asChildPropDef,

package/src/components/hover-card.tsx

@@ -4,6 +4,7 @@ import { HoverCard as HoverCardPrimitive } from 'radix-ui';
 
 import { hoverCardContentPropDefs } from './hover-card.props.js';
 import { extractProps } from '../helpers/extract-props.js';
+import { useThemeSizeProps } from '../helpers/theme-size.js';
 import { requireReactElement } from '../helpers/require-react-element.js';
 import { Theme } from './theme.js';
 
@@ -41,7 +42,8 @@ interface HoverCardContentProps
   container?: React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Portal>['container'];
 }
 const HoverCardContent = React.forwardRef<HoverCardContentElement, HoverCardContentProps>(
-  (props, forwardedRef) => {
+  (ownProps, forwardedRef) => {
+    const props = useThemeSizeProps(ownProps, hoverCardContentPropDefs.size);
     const { className, forceMount, container, ...contentProps } = extractProps(
       props,
       hoverCardContentPropDefs

package/src/components/icon-button.css

@@ -1,157 +1,9 @@
 /**
  * IconButton Component Styles
- * 
- * This file contains the core styling for the IconButton component, which
- * extends the base button with specialized behavior for icon-only interactions.
- * Icon buttons maintain square aspect ratios and provide consistent icon sizing
- * across all variants and sizes.
- * 
- * Key features:
- * - Square aspect ratios for consistent visual alignment
- * - Automatic icon sizing based on button size
- * - Specialized flush behavior for ghost variants
- * - Responsive design with mobile-first approach
- * - Seamless text integration with negative margins
+ *
+ * The square shape and the flush trim live with the shared control ladder in
+ * _internal/base-button.css (`.rt-BaseButton:where(.rt-IconButton)`), so their order against
+ * the padding rules never depends on import order.
  */
 
 @import './_internal/base-button.css';
-
-/***************************************************************************************************
- *                                                                                                 *
- * SIZES                                                                                           *
- *                                                                                                 *
- * Icon button sizes maintain square aspect ratios for consistent visual alignment.
- * Each size corresponds to the same dimensions as regular buttons but ensures
- * perfect squares for optimal icon display and touch targets.
- *                                                                                                 *
- ***************************************************************************************************/
-
-/* 
- * Base icon button styling that ensures square aspect ratios
- * Uses the same height as base buttons but sets width to match
- */
-.rt-IconButton {
-  height: var(--base-button-height);
-  width: var(--base-button-height);
-}
-
-@breakpoints {
-  .rt-IconButton {
-    /* 
-     * Size 1: Compact (24px x 24px)
-     * Designed for toolbars and dense interfaces
-     */
-    &:where(.rt-r-size-1) {
-      /* 
-       * Icon sizing for size 1
-       * Icons are automatically sized to match the button's scale
-       */
-      /* stylelint-disable-next-line selector-max-type */
-      & :where(svg) {
-        width: var(--content-icon-size-1);
-        height: var(--content-icon-size-1);
-      }
-    }
-    
-    /* 
-     * Size 2: Standard (32px x 32px)
-     * Default size for most interface contexts
-     */
-    &:where(.rt-r-size-2) {
-      /* Icon sizing for size 2 */
-      /* stylelint-disable-next-line selector-max-type */
-      & :where(svg) {
-        width: var(--content-icon-size-2);
-        height: var(--content-icon-size-2);
-      }
-    }
-    
-    /* 
-     * Size 3: Large (40px x 40px)
-     * Recommended for important actions and mobile touch targets
-     */
-    &:where(.rt-r-size-3) {
-      /* Icon sizing for size 3 */
-      /* stylelint-disable-next-line selector-max-type */
-      & :where(svg) {
-        width: var(--content-icon-size-3);
-        height: var(--content-icon-size-3);
-      }
-    }
-    
-    /* 
-     * Size 4: Extra Large (48px x 48px)
-     * Designed for hero sections and maximum visual impact
-     */
-    &:where(.rt-r-size-4) {
-      /* Icon sizing for size 4 */
-      /* stylelint-disable-next-line selector-max-type */
-      & :where(svg) {
-        width: var(--content-icon-size-4);
-        height: var(--content-icon-size-4);
-      }
-    }
-  }
-
-  /* 
-   * Specialized flush behavior for ghost variant icon buttons
-   * This creates seamless text integration by using negative margins
-   * to compensate for the button's padding
-   */
-  .rt-IconButton:where(.rt-variant-ghost) {
-    &:where([data-flush='true']) {
-      /* 
-       * Reset defined margin variables to avoid inheriting from higher components
-       * If a margin IS defined on the component itself, the utility class will win and reset it
-       */
-      --margin-top: 0px;
-      --margin-right: 0px;
-      --margin-bottom: 0px;
-      --margin-left: 0px;
-
-      /* 
-       * Define overrides to incorporate negative margins using ghost padding
-       * This creates the seamless integration effect by pulling the button
-       * closer to surrounding text
-       */
-      --margin-top-override: calc(var(--margin-top) - var(--icon-button-ghost-padding));
-      --margin-right-override: calc(var(--margin-right) - var(--icon-button-ghost-padding));
-      --margin-bottom-override: calc(var(--margin-bottom) - var(--icon-button-ghost-padding));
-      --margin-left-override: calc(var(--margin-left) - var(--icon-button-ghost-padding));
-
-      /* Apply the calculated negative margins */
-      margin-top: var(--margin-top-override);
-      margin-right: var(--margin-right-override);
-      margin-bottom: var(--margin-bottom-override);
-      margin-left: var(--margin-left-override);
-
-      /* 
-       * Reset the overrides on direct children
-       * This prevents the negative margins from affecting child elements
-       */
-      :where(&) > * {
-        --margin-top-override: initial;
-        --margin-right-override: initial;
-        --margin-bottom-override: initial;
-        --margin-left-override: initial;
-      }
-    }
-
-    /* 
-     * Ghost padding values for different sizes
-     * These determine the amount of negative margin applied in flush mode
-     */
-    &:where(.rt-r-size-1) {
-      --icon-button-ghost-padding: var(--space-2);
-    }
-    &:where(.rt-r-size-2) {
-      --icon-button-ghost-padding: calc(var(--space-2) * 1.5);
-    }
-    &:where(.rt-r-size-3) {
-      --icon-button-ghost-padding: var(--space-3);
-    }
-    &:where(.rt-r-size-4) {
-      --icon-button-ghost-padding: var(--space-4);
-    }
-  }
-}

package/src/components/index.css

@@ -28,7 +28,6 @@
 @import './hover-card.css';
 @import './icon-button.css';
 @import './image.css';
-@import './inset.css';
 @import './kbd.css';
 @import './link.css';
 @import './navbar.css';

package/src/components/index.tsx

@@ -32,7 +32,6 @@ export {
   ThickDividerHorizontalIcon,
 } from './icons.js';
 export { Image, type ImageProps } from './image.js';
-export { Inset, type InsetProps } from './inset.js';
 export { Kbd, type KbdProps } from './kbd.js';
 export { Link, type LinkProps } from './link.js';
 export * as Navbar from './navbar.js';