@mastra/playground-ui 69.0.0-alpha.0 → 69.0.0-alpha.2

package/dist/combobox-parts-_m3Qgmci.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-parts-_m3Qgmci.js","names":["BaseCombobox","_Fragment","React"],"sources":["../src/ds/components/Combobox/combobox-styles.ts","../src/ds/components/Combobox/combobox-parts.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport { buttonVariants, isIconButtonSize } from '../Button/Button';\nimport type { ButtonSize } from '../Button/Button';\nimport { controlTriggerOpenState } from '@/ds/primitives/control-size';\nimport type { ControlTriggerVisualVariant } from '@/ds/primitives/control-size';\nimport { fieldTriggerErrorBorder, fieldTriggerStyle, fieldTriggerWidthStyle } from '@/ds/primitives/form-element';\nimport {\n  menuItemCheckClass,\n  menuItemClass,\n  menuPopupClass,\n  menuPositionerClass,\n  menuSearchClasses,\n  menuEmptyClass,\n} from '@/ds/primitives/menu-item';\nimport { cn } from '@/lib/utils';\n\n/**\n * A combobox is a form field, so it reuses the Button's size/shape recipe,\n * mirroring `SelectTrigger`: `default` (the Input's overlay surface — the\n * default here too) and `ghost` (borderless, for breadcrumbs/inline pickers). Only the high-emphasis `primary`\n * look is intentionally NOT offered (a field is not a call-to-action).\n */\nexport type ComboboxVisualVariant = ControlTriggerVisualVariant;\nexport type ComboboxLegacyVariant = 'link';\nexport type ComboboxVariant = ComboboxVisualVariant | ComboboxLegacyVariant;\n\nfunction normalizeComboboxVariant(variant: ComboboxVariant): ComboboxVisualVariant {\n  return variant === 'link' ? 'ghost' : variant;\n}\n\n/**\n * Single source of truth for both the single- and multi-select combobox\n * triggers. A combobox = a button + a trailing chevron, so it reuses the Button\n * recipe (variant colors, size = height/text/padding/radius, unified border\n * focus, disabled) and layers only the combobox-specific extras — exactly like\n * `SelectTrigger`.\n */\nexport function comboboxTriggerClass({\n  variant,\n  size,\n  className,\n}: {\n  variant: ComboboxVariant;\n  size: ButtonSize;\n  className?: string;\n}): string {\n  const visualVariant = normalizeComboboxVariant(variant);\n\n  return cn(\n    buttonVariants({ variant: visualVariant, size }),\n    visualVariant === 'default' && fieldTriggerStyle,\n    // Fill the field and push the value left / chevron right (Button's base\n    // centers its content with `justify-center`). Icon sizes are a fixed square\n    // showing only the chevron, so they keep Button's centering.\n    !isIconButtonSize(size) && cn(fieldTriggerWidthStyle, 'justify-between'),\n    // Read as \"active\" while the popup is open, per variant (see map above).\n    controlTriggerOpenState[visualVariant],\n    'data-[placeholder]:text-muted-foreground',\n    fieldTriggerErrorBorder,\n    className,\n  );\n}\n\n/** Options are shared menu items, which already grow to fit a second line. */\nexport const comboboxItemClass = cva(menuItemClass, {\n  variants: {\n    multiple: {\n      false: '',\n      true: '',\n    },\n  },\n  defaultVariants: {\n    multiple: false,\n  },\n});\n\n/** Fixed popup widths a call site can pick; without one the popup takes the trigger's width. Never narrower than the trigger or wider than the screen. */\nexport type ComboboxPopupWidth = 'sm' | 'md' | 'lg' | 'xl';\n\nexport const comboboxPopupWidthClass: Record<ComboboxPopupWidth, string> = {\n  sm: 'w-48',\n  md: 'w-64',\n  lg: 'w-80',\n  xl: 'w-96',\n};\n\nexport const comboboxStyles = {\n  /** @deprecated A `Field` lays out the combobox and its error. */\n  root: 'flex flex-col gap-1.5',\n\n  /** Chevron icon in trigger — decorative icon token shared by every field. */\n\n  /** Placeholder text color */\n  placeholder: 'text-muted-foreground',\n\n  /**\n   * Popup container — shared menu popup, but the search row sits edge-to-edge\n   * above the list, so padding/scrolling move to the list itself.\n   */\n  popup: cn(menuPopupClass, 'max-h-none overflow-hidden p-0'),\n\n  /** Positioner */\n  positioner: cn(menuPositionerClass, 'pointer-events-auto'),\n\n  /** Search input container — borderless top section, hairline divider below. */\n  searchContainer: menuSearchClasses.container,\n\n  /** Search icon */\n  searchIcon: menuSearchClasses.icon,\n\n  /** Search input */\n  searchInput: cn(menuSearchClasses.input, 'disabled:cursor-not-allowed disabled:opacity-50'),\n\n  /** Empty state */\n  empty: cn(menuEmptyClass, 'empty:hidden'),\n\n  /** Options list */\n  // `empty:p-0` — Empty renders outside the List, so an empty List must not leave its padding behind.\n  list: 'p-1 empty:p-0',\n\n  /** Scroll container around the List. */\n  listScroller: 'max-h-dropdown overflow-y-auto overflow-x-hidden',\n\n  /** Option item base — rounded-lg sits concentrically inside rounded-xl + p-1. */\n  item: comboboxItemClass({ multiple: false }),\n\n  /** An item's content beside its check: start slot, text, end slot. */\n  itemContent: 'flex min-w-0 flex-1 items-center gap-2',\n\n  /** Multi-select item — same item rhythm with a right-aligned selected check. */\n  itemMulti: comboboxItemClass({ multiple: true }),\n\n  /** Right-aligned slot grouping end content + selection check. */\n  itemRightSlot: 'ml-auto flex items-center gap-2 shrink-0',\n\n  /** Check indicator container — inline, shown only when item is selected. */\n  checkContainer: cn(menuItemCheckClass, 'ml-0'),\n\n  /** Check icon (single select) */\n  checkIcon: 'size-full',\n\n  /** Option label/description wrapper */\n  optionText: 'flex flex-col gap-0.5 min-w-0',\n\n  /** Option label: wraps (ids break anywhere) and clamps at two lines, so a long label stays readable without growing the row. */\n  optionLabel: 'line-clamp-2 whitespace-normal wrap-anywhere',\n\n  /** Option description: same two-line clamp as the label. */\n  optionDescription: 'text-caption text-muted-foreground line-clamp-2 whitespace-normal wrap-anywhere',\n\n  /** Option end slot — `ml-auto` makes it push right inside flex containers (used by multi-select). */\n  optionEnd: 'ml-auto flex items-center shrink-0',\n\n  /** @deprecated A `FieldError` colors the error. */\n  error: 'text-body-sm text-destructive-foreground',\n} as const;\n","// Composable Combobox parts: shadcn's structure and names (https://ui.shadcn.com/docs/components/combobox),\n// built on Base UI like theirs, styled with our design system. The root is `ComboboxRoot` because\n// `Combobox` is the options-driven component in combobox.tsx.\nimport { Combobox as BaseCombobox } from '@base-ui/react/combobox';\nimport { Check, ChevronDown, Search, X } from 'lucide-react';\nimport * as React from 'react';\nimport { comboboxItemClass, comboboxStyles, comboboxTriggerClass } from './combobox-styles';\nimport type { ComboboxVariant } from './combobox-styles';\nimport { ButtonChevron, ButtonIcon, isIconButtonSize } from '@/ds/components/Button/Button';\nimport type { ButtonSize, TextButtonSize } from '@/ds/components/Button/Button';\nimport { ScrollArea, ScrollAreaViewport } from '@/ds/components/ScrollArea';\nimport { FLOATING_POSITION_METHOD } from '@/ds/primitives/floating';\nimport { menuLabelClass, menuSeparatorClass } from '@/ds/primitives/menu-item';\nimport { passwordManagerOptOutProps } from '@/ds/primitives/password-manager-autofill';\nimport { usePopupAnchor } from '@/ds/primitives/popup-anchor';\nimport { usePortalContainer } from '@/ds/primitives/portal-container';\nimport type { PortalContainer } from '@/ds/primitives/portal-container';\nimport { cn } from '@/lib/utils';\n\n/**\n * Root. Same props as Base UI's `Combobox.Root` (`items`, `value`, `onValueChange`, `multiple`,\n * `autoHighlight`, `filter`, ...). Pick one of three shapes:\n * - Search in the field: `ComboboxInput` + `ComboboxContent`.\n * - Multiple, chips in the field: `ComboboxChips` (chips + `ComboboxChipsInput`) + `ComboboxContent`.\n * - Compact trigger, search in the popup: `ComboboxTrigger` + `ComboboxContent` starting with\n *   `ComboboxSearch`. For small triggers (an icon, a ghost button in a toolbar).\n */\nfunction ComboboxRoot<Value, Multiple extends boolean | undefined = false>(\n  props: BaseCombobox.Root.Props<Value, Multiple>,\n) {\n  return <BaseCombobox.Root {...props} />;\n}\n\n/**\n * The field surface: today's trigger look, focus shown while the input inside has focus. The\n * chevron ends every field, at the same padding as today's Combobox trigger.\n */\nconst fieldClass = (size: TextButtonSize = 'md') =>\n  cn(\n    comboboxTriggerClass({ variant: 'default', size }),\n    'cursor-text gap-2 focus-within:[--surface-rim:var(--field-rim-focus)]',\n    // Disabled like other form elements (muted text, not-allowed cursor), keyed off the input.\n    'has-[input:disabled]:cursor-not-allowed has-[input:disabled]:bg-field-disabled has-[input:disabled]:[&_*]:cursor-not-allowed has-[input:disabled]:[&_*]:text-muted-foreground',\n    // The input inside carries `aria-invalid`; the field shows it like other invalid fields.\n    'has-[[aria-invalid=true]]:[--field-rim-focus:var(--destructive-indicator)] has-[[aria-invalid=true]]:[--field-rim:var(--destructive-indicator)]',\n  );\n\n/**\n * Text starts 0.9em in (the Button recipe's padding, shared with Select and today's Combobox).\n * The chevron is a 22px circle; its arrow's ink sits 6.33px inside the circle's edge (3px circle\n * inset + 3.33px icon inset), so the end padding puts that ink 0.9em from the end, like the text.\n */\nconst fieldPx = '0.9em';\n\n/** Inline so it wins over the Button recipe's `px` (same layer, later in the sheet). */\nconst fieldStyle: React.CSSProperties = {\n  paddingInlineStart: fieldPx,\n  paddingInlineEnd: `calc(${fieldPx} - 6.33px)`,\n};\n\n/**\n * Chips sit 4px from the field's edge on top, bottom and left: 3px visible inside the 1px rim,\n * the same 3px as the gap between chips. A chip is the field height minus that padding (22px).\n */\nconst chipsFieldStyle: React.CSSProperties = {\n  // Longhands only: a `padding` shorthand here would also reset the chevron's end padding.\n  paddingBlock: '4px',\n  paddingInlineStart: '4px',\n  paddingInlineEnd: fieldStyle.paddingInlineEnd,\n};\n\n// `w-0` + `flex-1`: an input's default width (about 20 characters) would otherwise set the field's\n// minimum width, so it couldn't shrink into a narrow column.\nconst inputClass =\n  'h-full w-0 min-w-0 flex-1 bg-transparent text-foreground outline-none zoom-safe-text placeholder:text-muted-foreground';\n\n/** Caret at the end of the value instead of selecting it, the way a text field behaves. */\nfunction moveCaretToEnd(event: React.FocusEvent<HTMLInputElement>) {\n  const input = event.currentTarget;\n  // Deferred one frame so it runs after the click places the caret; clicking the label lands here too.\n  requestAnimationFrame(() => input.setSelectionRange(input.value.length, input.value.length));\n}\n\n/**\n * The selected value, for a compact `ComboboxTrigger` or a custom display. `children` can be a\n * function of the value; `placeholder` shows while nothing is selected.\n */\nfunction ComboboxValue(props: BaseCombobox.Value.Props) {\n  return <BaseCombobox.Value data-slot=\"combobox-value\" {...props} />;\n}\n\n/** The round chevron button that ends ComboboxInput and ComboboxChips. */\nfunction ComboboxFieldTrigger() {\n  return (\n    <BaseCombobox.Trigger\n      data-slot=\"combobox-field-trigger\"\n      aria-label=\"Show options\"\n      // A round button target: the circle fills on hover, the chevron keeps its color.\n      className=\"flex size-5.5 shrink-0 cursor-pointer items-center justify-center rounded-full text-muted-foreground not-data-disabled:hover:bg-fill\"\n    >\n      {/* Sized like Select's chevron: outside the icon rung, so it keeps Lucide's default stroke\n          (1.33px at 16px) instead of the rung's 1px. */}\n      <ChevronDown className=\"size-4\" />\n    </BaseCombobox.Trigger>\n  );\n}\n\ntype ComboboxTriggerProps = Omit<BaseCombobox.Trigger.Props, 'className'> & {\n  className?: string;\n  /** The Button-recipe look, like Select: `default` (field surface), `outline` or `ghost`. */\n  variant?: ComboboxVariant;\n  /** Icon sizes (`icon-*`) show only `icon` (or the chevron); `children` stay as accessible text. */\n  size?: ButtonSize;\n  /** Shown before the value, or alone at icon sizes (e.g. a filter icon), replacing the chevron there. */\n  icon?: React.ReactNode;\n  showChevron?: boolean;\n};\n\n/**\n * A compact trigger that opens the list, with the search inside the popup (`ComboboxSearch`). For\n * small triggers such as an icon or a ghost button; a form field uses ComboboxInput instead.\n * `children` is what the trigger shows, usually `<ComboboxValue placeholder=\"…\" />`.\n */\nfunction ComboboxTrigger({\n  className,\n  children,\n  variant = 'default',\n  size = 'md',\n  icon,\n  showChevron = !(icon && isIconButtonSize(size)),\n  ...props\n}: ComboboxTriggerProps) {\n  const iconOnly = isIconButtonSize(size);\n  return (\n    <BaseCombobox.Trigger\n      data-slot=\"combobox-trigger\"\n      data-shape={iconOnly ? 'icon' : undefined}\n      className={comboboxTriggerClass({ variant, size, className })}\n      {...props}\n    >\n      {isIconButtonSize(size) ? (\n        <>\n          {icon}\n          <span className=\"sr-only\">{children}</span>\n        </>\n      ) : (\n        <>\n          {icon && <ButtonIcon size={size}>{icon}</ButtonIcon>}\n          <span className=\"min-w-0 flex-1 truncate text-left\">{children}</span>\n        </>\n      )}\n      {showChevron && <ButtonChevron size={size} />}\n    </BaseCombobox.Trigger>\n  );\n}\n\n/** An × that clears the value. ComboboxInput renders it with `showClear`. */\nfunction ComboboxClear({ className, ...props }: BaseCombobox.Clear.Props) {\n  return (\n    <BaseCombobox.Clear\n      data-slot=\"combobox-clear\"\n      aria-label=\"Clear\"\n      className={cn(\n        'flex size-4 shrink-0 items-center justify-center rounded-full text-muted-foreground hover:text-foreground',\n        className,\n      )}\n      {...props}\n    >\n      <X className=\"size-3.5\" />\n    </BaseCombobox.Clear>\n  );\n}\n\ntype ComboboxInputProps = Omit<BaseCombobox.Input.Props, 'size'> & {\n  /** The field height, from the control sizes. `md` by default. */\n  size?: TextButtonSize;\n  /** Shown before the text, e.g. the selected item's icon. */\n  start?: React.ReactNode;\n  /** The chevron button at the end. On by default. */\n  showTrigger?: boolean;\n  /** An × before the chevron that clears the value. */\n  showClear?: boolean;\n};\n\n/**\n * The field you type in to filter, showing the selected value while it's closed. `children` render\n * inside the field before the chevron (e.g. a muted \"4 items\" detail). The list opens at the\n * field's width. Inside a `Field`, the label and errors link to it.\n */\nfunction ComboboxInput({\n  className,\n  children,\n  showTrigger = true,\n  showClear = false,\n  size,\n  start,\n  onFocus,\n  ...props\n}: ComboboxInputProps) {\n  return (\n    <BaseCombobox.InputGroup data-slot=\"combobox-input\" className={cn(fieldClass(size), className)} style={fieldStyle}>\n      {start ? <span className=\"flex shrink-0 items-center\">{start}</span> : null}\n      <BaseCombobox.Input\n        onFocus={event => {\n          moveCaretToEnd(event);\n          onFocus?.(event);\n        }}\n        className={inputClass}\n        {...passwordManagerOptOutProps}\n        {...props}\n      />\n      {children ? <span className=\"flex shrink-0 items-center gap-2 text-muted-foreground\">{children}</span> : null}\n      {showClear ? <ComboboxClear /> : null}\n      {showTrigger ? <ComboboxFieldTrigger /> : null}\n    </BaseCombobox.InputGroup>\n  );\n}\n\n/**\n * The search row at the top of the popup, for a compact `ComboboxTrigger`. The same row as today's\n * Combobox: a search icon, a borderless input and a hairline under it.\n */\nfunction ComboboxSearch({ className, ...props }: BaseCombobox.Input.Props) {\n  return (\n    <div data-slot=\"combobox-search\" className={comboboxStyles.searchContainer}>\n      <Search className={comboboxStyles.searchIcon} />\n      <BaseCombobox.Input\n        className={cn(comboboxStyles.searchInput, className)}\n        {...passwordManagerOptOutProps}\n        {...props}\n      />\n    </div>\n  );\n}\n\ntype ComboboxContentProps = BaseCombobox.Popup.Props &\n  Pick<BaseCombobox.Positioner.Props, 'side' | 'align' | 'sideOffset' | 'alignOffset' | 'anchor'> & {\n    /** Where the popup portals to. Defaults to the nearest dialog or drawer, so it stays interactive there. */\n    container?: PortalContainer;\n  };\n\n/**\n * The popup. Under a field (ComboboxInput or ComboboxChips) it opens at the field's width; under a\n * compact ComboboxTrigger it takes the trigger's width, at least 11rem. Either way the width never\n * follows the filtered items, so it holds still while you type. (`Combobox`'s `popupWidth` picks a\n * fixed, wider width for long options instead.)\n */\nfunction ComboboxContent({\n  className,\n  side = 'bottom',\n  sideOffset = 4,\n  align = 'start',\n  alignOffset = 0,\n  anchor,\n  container,\n  ...props\n}: ComboboxContentProps) {\n  const popupAnchor = usePopupAnchor();\n  const resolvedContainer = usePortalContainer(container);\n  return (\n    <BaseCombobox.Portal container={resolvedContainer}>\n      <BaseCombobox.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        // Base UI anchors to the field (the InputGroup of ComboboxInput or ComboboxChips), or to the\n        // trigger when the input is in the popup; a crumb switcher anchors to the whole crumb.\n        anchor={anchor ?? popupAnchor}\n        positionMethod={FLOATING_POSITION_METHOD}\n        className={comboboxStyles.positioner}\n      >\n        <BaseCombobox.Popup\n          data-slot=\"combobox-content\"\n          // With the popup's `min-w-[max(11rem,var(--anchor-width))]`: the anchor's width, at least 11rem.\n          className={cn(comboboxStyles.popup, 'w-(--anchor-width)', className)}\n          {...props}\n        />\n      </BaseCombobox.Positioner>\n    </BaseCombobox.Portal>\n  );\n}\n\n/** The scrolling list. Children: a render function per item (or per group), like Base UI's List. */\nfunction ComboboxList({ className, ...props }: BaseCombobox.List.Props) {\n  return (\n    <ScrollArea maxHeight=\"var(--spacing-dropdown)\">\n      <ScrollAreaViewport className=\"scroll-py-8\">\n        <BaseCombobox.List data-slot=\"combobox-list\" className={cn(comboboxStyles.list, className)} {...props} />\n      </ScrollAreaViewport>\n    </ScrollArea>\n  );\n}\n\n/** One option. A check shows on the right while it's selected. */\nfunction ComboboxItem({ className, children, ref, ...props }: BaseCombobox.Item.Props) {\n  return (\n    <BaseCombobox.Item ref={ref} data-slot=\"combobox-item\" className={cn(comboboxItemClass({}), className)} {...props}>\n      <span className={comboboxStyles.itemContent}>{children}</span>\n      <span className={comboboxStyles.checkContainer}>\n        <BaseCombobox.ItemIndicator>\n          <Check className={comboboxStyles.checkIcon} />\n        </BaseCombobox.ItemIndicator>\n      </span>\n    </BaseCombobox.Item>\n  );\n}\n\n/** Title over a description inside an item (shadcn's Item / ItemTitle / ItemDescription). */\nfunction ComboboxItemContent({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span data-slot=\"combobox-item-content\" className={cn('flex min-w-0 flex-col gap-0.5', className)} {...props} />\n  );\n}\n\nfunction ComboboxItemTitle({ className, ...props }: React.ComponentProps<'span'>) {\n  return <span data-slot=\"combobox-item-title\" className={cn('truncate', className)} {...props} />;\n}\n\n/** Muted, up to two lines. */\nfunction ComboboxItemDescription({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"combobox-item-description\"\n      // `whitespace-normal`: the item recipe's `[&>span]:truncate` makes its content `nowrap`, which\n      // would cut the description off mid-word on one line instead of clamping it at two.\n      className={cn('line-clamp-2 text-caption whitespace-normal text-muted-foreground', className)}\n      {...props}\n    />\n  );\n}\n\n/** Muted text at the end of an item, e.g. its kind (\"Agent\"). */\nfunction ComboboxItemEnd({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"combobox-item-end\"\n      className={cn('ml-auto shrink-0 text-caption text-muted-foreground', className)}\n      {...props}\n    />\n  );\n}\n\n/** A section of items. Pass the section's `items`; render them with ComboboxCollection. */\nfunction ComboboxGroup(props: BaseCombobox.Group.Props) {\n  return <BaseCombobox.Group data-slot=\"combobox-group\" {...props} />;\n}\n\n/** A group's heading, styled like menu section labels. */\nfunction ComboboxLabel({ className, ...props }: BaseCombobox.GroupLabel.Props) {\n  return <BaseCombobox.GroupLabel data-slot=\"combobox-label\" className={cn(menuLabelClass, className)} {...props} />;\n}\n\n/** Renders a group's filtered items, one render function call per item. */\nfunction ComboboxCollection(props: BaseCombobox.Collection.Props) {\n  return <BaseCombobox.Collection data-slot=\"combobox-collection\" {...props} />;\n}\n\n/** Shows its children only when the filter matches nothing. */\nfunction ComboboxEmpty({ className, ...props }: BaseCombobox.Empty.Props) {\n  return <BaseCombobox.Empty data-slot=\"combobox-empty\" className={cn(comboboxStyles.empty, className)} {...props} />;\n}\n\nfunction ComboboxSeparator({ className, ...props }: BaseCombobox.Separator.Props) {\n  return (\n    <BaseCombobox.Separator data-slot=\"combobox-separator\" className={cn(menuSeparatorClass, className)} {...props} />\n  );\n}\n\n/**\n * Multi-select field: chips for the picked items, then ComboboxChipsInput. The chips and input wrap\n * inside their own area so the chevron keeps its place on the first row. While the field is one\n * line it keeps the pill shape of every other field; once chips wrap it takes the Textarea corner.\n */\nfunction ComboboxChips({ className, children, 'aria-label': ariaLabel, ...props }: BaseCombobox.InputGroup.Props) {\n  // On the inner chips area, so a caller's `ref` reaches the field without merging refs.\n  const chipsRef = React.useRef<HTMLDivElement>(null);\n  const [multiline, setMultiline] = React.useState(false);\n\n  React.useLayoutEffect(() => {\n    const field = chipsRef.current?.parentElement;\n    // No observer (e.g. jsdom in tests): the field keeps its one-row shape.\n    if (!field || typeof ResizeObserver === 'undefined') return;\n    // One row is the control height (the field's `min-height`); anything taller means the chips wrapped.\n    // The 1px slack absorbs subpixel rounding.\n    const rowHeight = parseFloat(getComputedStyle(field).minHeight) || 0;\n    const observer = new ResizeObserver(() => setMultiline(field.offsetHeight > rowHeight + 1));\n    observer.observe(field);\n    return () => observer.disconnect();\n  }, []);\n\n  // Chips inside an InputGroup, like Base UI's multi-select example: the popup anchors to the group.\n  return (\n    <BaseCombobox.InputGroup\n      data-slot=\"combobox-chips\"\n      data-multiline={multiline ? '' : undefined}\n      style={chipsFieldStyle}\n      className={cn(\n        fieldClass(),\n        'h-auto min-h-control-md items-start data-multiline:rounded-xl',\n        // The chips field keeps its resting look: no open tint, no placeholder color. InputGroup sets those\n        // attributes, which the trigger recipe styles.\n        'data-[placeholder]:text-foreground data-[popup-open]:[--surface-tint:transparent]',\n        className,\n      )}\n      {...props}\n    >\n      {/* The label names the chips toolbar, as it did when Chips was the outer element. */}\n      <BaseCombobox.Chips ref={chipsRef} aria-label={ariaLabel} className=\"flex min-w-0 flex-1 flex-wrap gap-[3px]\">\n        {children}\n      </BaseCombobox.Chips>\n      {/* Same height as a chip, so the chevron centers on the first row. */}\n      <span className=\"flex h-5.5 shrink-0 items-center\">\n        <ComboboxFieldTrigger />\n      </span>\n    </BaseCombobox.InputGroup>\n  );\n}\n\n/** One picked item inside ComboboxChips. The × (or Backspace in the input) removes it. */\nfunction ComboboxChip({\n  className,\n  children,\n  showRemove = true,\n  ...props\n}: BaseCombobox.Chip.Props & { showRemove?: boolean }) {\n  return (\n    <BaseCombobox.Chip\n      data-slot=\"combobox-chip\"\n      className={cn(\n        // 8px from the left edge to the text, 6px from the text to the ×'s ink, 8px from the ink to\n        // the right edge. Text in the controls' role (`text-label`), like the field value.\n        'flex h-5.5 items-center rounded-full bg-fill pl-2 text-label text-foreground',\n        !showRemove && 'pr-2',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {showRemove ? (\n        <BaseCombobox.ChipRemove\n          data-slot=\"combobox-chip-remove\"\n          aria-label={typeof children === 'string' ? `Remove ${children}` : 'Remove'}\n          // The whole right end is the hit area: full height, from the gap to the chip's edge. The ×'s\n          // ink sits 2.5px inside its 12px icon, so 3.5px / 5.5px padding put it 6px / 8px out.\n          className=\"flex h-full cursor-pointer items-center rounded-r-full pr-[5.5px] pl-[3.5px] text-muted-foreground not-data-disabled:hover:text-foreground\"\n        >\n          {/* Inline so the button's color wins over the field's `[&_svg]` icon colors. */}\n          <X className=\"size-3\" style={{ color: 'inherit' }} />\n        </BaseCombobox.ChipRemove>\n      ) : null}\n    </BaseCombobox.Chip>\n  );\n}\n\n/** The text input after the chips in ComboboxChips. */\nfunction ComboboxChipsInput({ className, onFocus, ...props }: BaseCombobox.Input.Props) {\n  return (\n    <BaseCombobox.Input\n      data-slot=\"combobox-chip-input\"\n      onFocus={event => {\n        moveCaretToEnd(event);\n        onFocus?.(event);\n      }}\n      className={cn(\n        inputClass,\n        // Text lines up with other fields' text when there are no chips; 4px after a chip otherwise.\n        // Not `first:`: Base UI inserts a hidden Dismiss element before the input while open.\n        'h-5.5 w-0 min-w-12 flex-1 pl-[calc(0.9em_-_4px)] [[data-slot=combobox-chip]~&]:pl-1',\n        className,\n      )}\n      {...passwordManagerOptOutProps}\n      {...props}\n    />\n  );\n}\n\nexport type { ComboboxTriggerProps, ComboboxInputProps, ComboboxContentProps };\n\nexport {\n  ComboboxRoot,\n  ComboboxInput,\n  ComboboxTrigger,\n  ComboboxSearch,\n  ComboboxValue,\n  ComboboxClear,\n  ComboboxContent,\n  ComboboxList,\n  ComboboxItem,\n  ComboboxItemContent,\n  ComboboxItemTitle,\n  ComboboxItemDescription,\n  ComboboxItemEnd,\n  ComboboxGroup,\n  ComboboxLabel,\n  ComboboxCollection,\n  ComboboxEmpty,\n  ComboboxSeparator,\n  ComboboxChips,\n  ComboboxChip,\n  ComboboxChipsInput,\n};\n"],"mappings":";;;;;;;;;;;;;;;;AA0BA,SAAS,yBAAyB,SAAiD;CACjF,OAAO,YAAY,SAAS,UAAU;AACxC;;;;;;;;AASA,SAAgB,qBAAqB,EACnC,SACA,MACA,aAKS;CACT,MAAM,gBAAgB,yBAAyB,OAAO;CAEtD,OAAO,GACL,eAAe;EAAE,SAAS;EAAe;CAAK,CAAC,GAC/C,kBAAkB,aAAA,8TAIlB,CAAC,iBAAiB,IAAI,KAAK,GAAA,oDAA2B,iBAAiB,GAEvE,wBAAwB,gBACxB,4CACA,yBACA,SACF;AACF;;AAGA,IAAa,oBAAoB,IAAI,eAAe;CAClD,UAAU,EACR,UAAU;EACR,OAAO;EACP,MAAM;CACR,EACF;CACA,iBAAiB,EACf,UAAU,MACZ;AACF,CAAC;AAKD,IAAa,0BAA8D;CACzE,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAa,iBAAiB;;CAE5B,MAAM;;;CAKN,aAAa;;;;;CAMb,OAAO,GAAG,gBAAgB,gCAAgC;;CAG1D,YAAY,GAAG,qBAAqB,qBAAqB;;CAGzD,iBAAiB,kBAAkB;;CAGnC,YAAY,kBAAkB;;CAG9B,aAAa,GAAG,kBAAkB,OAAO,iDAAiD;;CAG1F,OAAO,GAAG,gBAAgB,cAAc;;CAIxC,MAAM;;CAGN,cAAc;;CAGd,MAAM,kBAAkB,EAAE,UAAU,MAAM,CAAC;;CAG3C,aAAa;;CAGb,WAAW,kBAAkB,EAAE,UAAU,KAAK,CAAC;;CAG/C,eAAe;;CAGf,gBAAgB,GAAG,oBAAoB,MAAM;;CAG7C,WAAW;;CAGX,YAAY;;CAGZ,aAAa;;CAGb,mBAAmB;;CAGnB,WAAW;;CAGX,OAAO;AACT;;;;;;;;;;AChIA,SAAS,aACP,OACA;CACA,OAAO,oBAACA,SAAa,MAAd,EAAmB,GAAI,MAAQ,CAAA;AACxC;;;;;AAMA,IAAM,cAAc,OAAuB,SACzC,GACE,qBAAqB;CAAE,SAAS;CAAW;AAAK,CAAC,GACjD,yEAEA,iLAEA,iJACF;;;;;;AAOF,IAAM,UAAU;;AAGhB,IAAM,aAAkC;CACtC,oBAAoB;CACpB,kBAAkB,QAAQ,QAAQ;AACpC;;;;;AAMA,IAAM,kBAAuC;CAE3C,cAAc;CACd,oBAAoB;CACpB,kBAAkB,WAAW;AAC/B;AAIA,IAAM,aACJ;;AAGF,SAAS,eAAe,OAA2C;CACjE,MAAM,QAAQ,MAAM;CAEpB,4BAA4B,MAAM,kBAAkB,MAAM,MAAM,QAAQ,MAAM,MAAM,MAAM,CAAC;AAC7F;;;;;AAMA,SAAS,cAAc,OAAiC;CACtD,OAAO,oBAACA,SAAa,OAAd;EAAoB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACpE;;AAGA,SAAS,uBAAuB;CAC9B,OACE,oBAACA,SAAa,SAAd;EACE,aAAU;EACV,cAAW;EAEX,WAAU;EAIV,UAAA,oBAAC,aAAD,EAAa,WAAU,SAAU,CAAA;CACb,CAAA;AAE1B;;;;;;AAkBA,SAAS,gBAAgB,EACvB,WACA,UACA,UAAU,WACV,OAAO,MACP,MACA,cAAc,EAAE,QAAQ,iBAAiB,IAAI,IAC7C,GAAG,SACoB;CACvB,MAAM,WAAW,iBAAiB,IAAI;CACtC,OACE,qBAACA,SAAa,SAAd;EACE,aAAU;EACV,cAAY,WAAW,SAAS,KAAA;EAChC,WAAW,qBAAqB;GAAE;GAAS;GAAM;EAAU,CAAC;EAC5D,GAAI;EAJN,UAAA,CAMG,iBAAiB,IAAI,IACpB,qBAAAC,YAAA,EAAA,UAAA,CACG,MACD,oBAAC,QAAD;GAAM,WAAU;GAAW;EAAe,CAAA,CAC1C,EAAA,CAAA,IAEF,qBAAAA,YAAA,EAAA,UAAA,CACG,QAAQ,oBAAC,YAAD;GAAkB;GAAO,UAAA;EAAiB,CAAA,GACnD,oBAAC,QAAD;GAAM,WAAU;GAAqC;EAAe,CAAA,CACpE,EAAA,CAAA,GAEH,eAAe,oBAAC,eAAD,EAAqB,KAAO,CAAA,CACxB;;AAE1B;;AAGA,SAAS,cAAc,EAAE,WAAW,GAAG,SAAmC;CACxE,OACE,oBAACD,SAAa,OAAd;EACE,aAAU;EACV,cAAW;EACX,WAAW,GACT,6GACA,SACF;EACA,GAAI;EAEJ,UAAA,oBAAC,GAAD,EAAG,WAAU,WAAY,CAAA;CACP,CAAA;AAExB;;;;;;AAkBA,SAAS,cAAc,EACrB,WACA,UACA,cAAc,MACd,YAAY,OACZ,MACA,OACA,SACA,GAAG,SACkB;CACrB,OACE,qBAACA,SAAa,YAAd;EAAyB,aAAU;EAAiB,WAAW,GAAG,WAAW,IAAI,GAAG,SAAS;EAAG,OAAO;EAAvG,UAAA;GACG,QAAQ,oBAAC,QAAD;IAAM,WAAU;IAA8B,UAAA;GAAY,CAAA,IAAI;GACvE,oBAACA,SAAa,OAAd;IACE,UAAS,UAAS;KAChB,eAAe,KAAK;KACpB,UAAU,KAAK;IACjB;IACA,WAAW;IACX,GAAI;IACJ,GAAI;GACL,CAAA;GACA,WAAW,oBAAC,QAAD;IAAM,WAAU;IAA0D;GAAe,CAAA,IAAI;GACxG,YAAY,oBAAC,eAAD,CAAgB,CAAA,IAAI;GAChC,cAAc,oBAAC,sBAAD,CAAuB,CAAA,IAAI;EACnB;;AAE7B;;;;;AAMA,SAAS,eAAe,EAAE,WAAW,GAAG,SAAmC;CACzE,OACE,qBAAC,OAAD;EAAK,aAAU;EAAkB,WAAW,eAAe;EAA3D,UAAA,CACE,oBAAC,QAAD,EAAQ,WAAW,eAAe,WAAa,CAAA,GAC/C,oBAACA,SAAa,OAAd;GACE,WAAW,GAAG,eAAe,aAAa,SAAS;GACnD,GAAI;GACJ,GAAI;EACL,CAAA,CACE;;AAET;;;;;;;AAcA,SAAS,gBAAgB,EACvB,WACA,OAAO,UACP,aAAa,GACb,QAAQ,SACR,cAAc,GACd,QACA,WACA,GAAG,SACoB;CACvB,MAAM,cAAc,eAAe;CACnC,MAAM,oBAAoB,mBAAmB,SAAS;CACtD,OACE,oBAACA,SAAa,QAAd;EAAqB,WAAW;EAC9B,UAAA,oBAACA,SAAa,YAAd;GACQ;GACM;GACL;GACM;GAGb,QAAQ,UAAU;GAClB,gBAAgB;GAChB,WAAW,eAAe;GAE1B,UAAA,oBAACA,SAAa,OAAd;IACE,aAAU;IAEV,WAAW,GAAG,eAAe,OAAO,sBAAsB,SAAS;IACnE,GAAI;GACL,CAAA;EACsB,CAAA;CACN,CAAA;AAEzB;;AAGA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAkC;CACtE,OACE,oBAAC,YAAD;EAAY,WAAU;EACpB,UAAA,oBAAC,oBAAD;GAAoB,WAAU;GAC5B,UAAA,oBAACA,SAAa,MAAd;IAAmB,aAAU;IAAgB,WAAW,GAAG,eAAe,MAAM,SAAS;IAAG,GAAI;GAAQ,CAAA;EACtF,CAAA;CACV,CAAA;AAEhB;;AAGA,SAAS,aAAa,EAAE,WAAW,UAAU,KAAK,GAAG,SAAkC;CACrF,OACE,qBAACA,SAAa,MAAd;EAAwB;EAAK,aAAU;EAAgB,WAAW,GAAG,kBAAkB,CAAC,CAAC,GAAG,SAAS;EAAG,GAAI;EAA5G,UAAA,CACE,oBAAC,QAAD;GAAM,WAAW,eAAe;GAAc;EAAe,CAAA,GAC7D,oBAAC,QAAD;GAAM,WAAW,eAAe;GAC9B,UAAA,oBAACA,SAAa,eAAd,EAAA,UACE,oBAAC,OAAD,EAAO,WAAW,eAAe,UAAY,CAAA,EACnB,CAAA;EACxB,CAAA,CACW;;AAEvB;;AAGA,SAAS,oBAAoB,EAAE,WAAW,GAAG,SAAuC;CAClF,OACE,oBAAC,QAAD;EAAM,aAAU;EAAwB,WAAW,GAAG,iCAAiC,SAAS;EAAG,GAAI;CAAQ,CAAA;AAEnH;AAEA,SAAS,kBAAkB,EAAE,WAAW,GAAG,SAAuC;CAChF,OAAO,oBAAC,QAAD;EAAM,aAAU;EAAsB,WAAW,GAAG,YAAY,SAAS;EAAG,GAAI;CAAQ,CAAA;AACjG;;AAGA,SAAS,wBAAwB,EAAE,WAAW,GAAG,SAAuC;CACtF,OACE,oBAAC,QAAD;EACE,aAAU;EAGV,WAAW,GAAG,qEAAqE,SAAS;EAC5F,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAuC;CAC9E,OACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GAAG,uDAAuD,SAAS;EAC9E,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,cAAc,OAAiC;CACtD,OAAO,oBAACA,SAAa,OAAd;EAAoB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACpE;;AAGA,SAAS,cAAc,EAAE,WAAW,GAAG,SAAwC;CAC7E,OAAO,oBAACA,SAAa,YAAd;EAAyB,aAAU;EAAiB,WAAW,GAAG,gBAAgB,SAAS;EAAG,GAAI;CAAQ,CAAA;AACnH;;AAGA,SAAS,mBAAmB,OAAsC;CAChE,OAAO,oBAACA,SAAa,YAAd;EAAyB,aAAU;EAAsB,GAAI;CAAQ,CAAA;AAC9E;;AAGA,SAAS,cAAc,EAAE,WAAW,GAAG,SAAmC;CACxE,OAAO,oBAACA,SAAa,OAAd;EAAoB,aAAU;EAAiB,WAAW,GAAG,eAAe,OAAO,SAAS;EAAG,GAAI;CAAQ,CAAA;AACpH;AAEA,SAAS,kBAAkB,EAAE,WAAW,GAAG,SAAuC;CAChF,OACE,oBAACA,SAAa,WAAd;EAAwB,aAAU;EAAqB,WAAW,GAAG,oBAAoB,SAAS;EAAG,GAAI;CAAQ,CAAA;AAErH;;;;;;AAOA,SAAS,cAAc,EAAE,WAAW,UAAU,cAAc,WAAW,GAAG,SAAwC;CAEhH,MAAM,WAAWE,QAAM,OAAuB,IAAI;CAClD,MAAM,CAAC,WAAW,gBAAgBA,QAAM,SAAS,KAAK;CAEtD,QAAM,sBAAsB;EAC1B,MAAM,QAAQ,SAAS,SAAS;EAEhC,IAAI,CAAC,SAAS,OAAO,mBAAmB,aAAa;EAGrD,MAAM,YAAY,WAAW,iBAAiB,KAAK,CAAC,CAAC,SAAS,KAAK;EACnE,MAAM,WAAW,IAAI,qBAAqB,aAAa,MAAM,eAAe,YAAY,CAAC,CAAC;EAC1F,SAAS,QAAQ,KAAK;EACtB,aAAa,SAAS,WAAW;CACnC,GAAG,CAAC,CAAC;CAGL,OACE,qBAACF,SAAa,YAAd;EACE,aAAU;EACV,kBAAgB,YAAY,KAAK,KAAA;EACjC,OAAO;EACP,WAAW,GACT,WAAW,GACX,iEAGA,qFACA,SACF;EACA,GAAI;EAZN,UAAA,CAeE,oBAACA,SAAa,OAAd;GAAoB,KAAK;GAAU,cAAY;GAAW,WAAU;GACjE;EACiB,CAAA,GAEpB,oBAAC,QAAD;GAAM,WAAU;GACd,UAAA,oBAAC,sBAAD,CAAuB,CAAA;EACnB,CAAA,CACiB;;AAE7B;;AAGA,SAAS,aAAa,EACpB,WACA,UACA,aAAa,MACb,GAAG,SACkD;CACrD,OACE,qBAACA,SAAa,MAAd;EACE,aAAU;EACV,WAAW,GAGT,gFACA,CAAC,cAAc,QACf,SACF;EACA,GAAI;EATN,UAAA,CAWG,UACA,aACC,oBAACA,SAAa,YAAd;GACE,aAAU;GACV,cAAY,OAAO,aAAa,WAAW,UAAU,aAAa;GAGlE,WAAU;GAGV,UAAA,oBAAC,GAAD;IAAG,WAAU;IAAS,OAAO,EAAE,OAAO,UAAU;GAAI,CAAA;EAC7B,CAAA,IACvB,IACa;;AAEvB;;AAGA,SAAS,mBAAmB,EAAE,WAAW,SAAS,GAAG,SAAmC;CACtF,OACE,oBAACA,SAAa,OAAd;EACE,aAAU;EACV,UAAS,UAAS;GAChB,eAAe,KAAK;GACpB,UAAU,KAAK;EACjB;EACA,WAAW,GACT,YAGA,uFACA,SACF;EACA,GAAI;EACJ,GAAI;CACL,CAAA;AAEL"}

package/dist/components/Breadcrumb.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.cjs.js","names":["cn","Skeleton","React","_Fragment","controlSizeClasses","controlStateColorTransition","quietTextHoverInGroup","quietTextHover","Icon","PopupAnchorProvider","SlashIcon"],"sources":["../../src/ds/components/Breadcrumb/Breadcrumb.tsx","../../src/ds/components/Breadcrumb/crumb-switcher.ts"],"sourcesContent":["import React from 'react';\n\nimport { Icon } from '../../icons/Icon';\nimport { SlashIcon } from '../../icons/SlashIcon';\nimport { Skeleton } from '@/ds/components/Skeleton';\nimport { controlSizeClasses } from '@/ds/primitives/control-size';\nimport { PopupAnchorProvider } from '@/ds/primitives/popup-anchor';\nimport { controlStateColorTransition } from '@/ds/primitives/transitions';\nimport { quietTextHover, quietTextHoverInGroup } from '@/ds/primitives/typography';\nimport { cn } from '@/lib/utils';\n\nexport interface BreadcrumbProps {\n  children?: React.ReactNode;\n  label?: string;\n  className?: string;\n  listClassName?: string;\n}\n\nexport const Breadcrumb = ({ children, label, className, listClassName }: BreadcrumbProps) => {\n  return (\n    <nav aria-label={label} className={className}>\n      <ol className={cn('flex items-center gap-0.5', listClassName)}>{children}</ol>\n    </nav>\n  );\n};\n\nexport interface CrumbProps {\n  isCurrent?: boolean;\n  as: React.ElementType;\n  className?: string;\n  to?: string;\n  prefetch?: boolean | null;\n  children?: React.ReactNode;\n  /** Prefix icon (bare SVG). The crumb wraps it in `<Icon>` and aligns it like a Button adornment. */\n  icon?: React.ReactNode;\n  /** Renders `CrumbSkeleton` in place of the label. */\n  isLoading?: boolean;\n  /**\n   * Sibling control rendered next to the label (never inside it). Expected to be a\n   * `size=\"icon-sm\"` ghost control, e.g. a CopyButton. Entity switchers go in `switcher`.\n   */\n  action?: React.ReactNode;\n  /**\n   * Entity switcher rendered next to the label; spread `crumbSwitcherTriggerProps` on it.\n   * When the crumb doesn't navigate (current crumb, or no `to`), its hit area covers the whole crumb.\n   */\n  switcher?: React.ReactNode;\n  'data-testid'?: string;\n}\n\nexport const CrumbSkeleton = (props: { 'data-testid'?: string }) => <Skeleton className=\"h-3 w-24\" {...props} />;\n\nexport const Crumb = ({\n  className,\n  as,\n  to,\n  isCurrent,\n  action,\n  switcher,\n  icon,\n  isLoading,\n  children,\n  ...props\n}: CrumbProps) => {\n  const Root = as || 'span';\n  const switcherCoversCrumb = Boolean(switcher && (isCurrent || !to));\n  const crumbRef = React.useRef<HTMLLIElement>(null);\n\n  return (\n    <>\n      <li\n        ref={crumbRef}\n        className={cn(\n          'group flex h-control-sm min-w-0 items-center',\n          isCurrent ? 'shrink' : 'shrink-0',\n          switcherCoversCrumb &&\n            'relative rounded-full has-[[data-slot=crumb-switcher]_[data-popup-open]]:bg-fill-subtle has-[[data-slot=crumb-switcher]_button:enabled]:hover:bg-fill-subtle has-[[data-slot=crumb-switcher]_button:enabled]:active:bg-fill',\n        )}\n      >\n        <Root\n          aria-current={isCurrent ? 'page' : undefined}\n          className={cn(\n            // Same box as `buttonVariants({ variant: 'ghost', size: 'sm' })` so a label and an\n            // icon-sm control sitting next to it share height, radius, padding and colors.\n            'inline-flex min-w-0 items-center gap-2 overflow-hidden rounded-full px-[.9em]',\n            controlSizeClasses.sm,\n            controlStateColorTransition,\n            // Long labels truncate: the current crumb gets more room than nav crumbs.\n            isCurrent\n              ? 'max-w-xs cursor-default text-foreground'\n              : switcherCoversCrumb\n                ? cn(quietTextHoverInGroup, 'max-w-48')\n                : cn(quietTextHover, 'max-w-48 cursor-pointer hover:bg-fill-subtle active:bg-fill'),\n            className,\n          )}\n          to={to}\n          {...props}\n        >\n          {icon && (\n            <Icon\n              className={cn(\n                'ml-[-.3em] shrink-0 opacity-50 group-hover:opacity-100',\n                'transition-opacity duration-normal ease-out-custom',\n              )}\n            >\n              {icon}\n            </Icon>\n          )}\n          {isLoading ? (\n            <CrumbSkeleton />\n          ) : (\n            // `text-overflow` needs a block container, so the label truncates in its\n            // own box rather than on the flex Root. Works for plain strings and for\n            // components that resolve to a string (route-header `Component` crumbs).\n            <span className=\"min-w-0 flex-1 truncate\">{children}</span>\n          )}\n        </Root>\n        {switcher && (\n          <span\n            data-slot=\"crumb-switcher\"\n            className={cn(\n              '-ml-1 flex h-control-sm shrink-0 items-center',\n              switcherCoversCrumb &&\n                '[&_button]:bg-transparent! [&_button:enabled]:after:absolute [&_button:enabled]:after:inset-0 [&_button:enabled]:after:rounded-full',\n            )}\n          >\n            {/* The switcher's popup opens from the crumb's start, like a menu on the whole crumb. */}\n            <PopupAnchorProvider value={crumbRef}>{switcher}</PopupAnchorProvider>\n          </span>\n        )}\n        {action && <span className=\"-ml-1 flex h-control-sm shrink-0 items-center\">{action}</span>}\n      </li>\n      {!isCurrent && (\n        <li role=\"separator\" className=\"flex h-full items-center\">\n          <Icon className=\"text-placeholder\">\n            <SlashIcon />\n          </Icon>\n        </li>\n      )}\n    </>\n  );\n};\n","import type { ComboboxProps } from '../Combobox';\n\nexport const crumbSwitcherTriggerProps = {\n  variant: 'ghost',\n  size: 'icon-sm',\n  // The trigger is just a chevron, so give the popup room for entity names.\n  popupWidth: 'md',\n} as const satisfies Pick<ComboboxProps, 'variant' | 'size' | 'popupWidth'>;\n"],"mappings":";;;;;;;;;;;;;;AAkBA,IAAa,cAAc,EAAE,UAAU,OAAO,WAAW,oBAAqC;CAC5F,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,cAAY;EAAkB;EACjC,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;GAAI,WAAWA,cAAAA,GAAG,6BAA6B,aAAa;GAAI;EAAa,CAAA;CAC1E,CAAA;AAET;AA0BA,IAAa,iBAAiB,UAAsC,iBAAA,GAAA,kBAAA,IAAA,CAACC,4BAAAA,UAAD;CAAU,WAAU;CAAW,GAAI;AAAQ,CAAA;AAE/G,IAAa,SAAS,EACpB,WACA,IACA,IACA,WACA,QACA,UACA,MACA,WACA,UACA,GAAG,YACa;CAChB,MAAM,OAAO,MAAM;CACnB,MAAM,sBAAsB,QAAQ,aAAa,aAAa,CAAC,GAAG;CAClE,MAAM,WAAWC,MAAAA,QAAM,OAAsB,IAAI;CAEjD,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAAC,kBAAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,MAAD;EACE,KAAK;EACL,WAAWH,cAAAA,GACT,gDACA,YAAY,WAAW,YACvB,uBACE,6NACJ;EAPF,UAAA;GASE,iBAAA,GAAA,kBAAA,KAAA,CAAC,MAAD;IACE,gBAAc,YAAY,SAAS,KAAA;IACnC,WAAWA,cAAAA,GAGT,iFACAI,gCAAAA,mBAAmB,IACnBC,+BAAAA,6BAEA,YACI,4CACA,sBACEL,cAAAA,GAAGM,8BAAAA,uBAAuB,UAAU,IACpCN,cAAAA,GAAGO,8BAAAA,gBAAgB,6DAA6D,GACtF,SACF;IACI;IACJ,GAAI;IAjBN,UAAA,CAmBG,QACC,iBAAA,GAAA,kBAAA,IAAA,CAACC,mBAAAA,MAAD;KACE,WAAWR,cAAAA,GACT,0DACA,oDACF;KAEC,UAAA;IACG,CAAA,GAEP,YACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,eAAD,CAAgB,CAAA,IAKhB,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;KAAM,WAAU;KAA2B;IAAe,CAAA,CAExD;;GACL,YACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IACE,aAAU;IACV,WAAWA,cAAAA,GACT,iDACA,uBACE,qIACJ;IAGA,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACS,gCAAAA,qBAAD;KAAqB,OAAO;KAAW,UAAA;IAA8B,CAAA;GACjE,CAAA;GAEP,UAAU,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IAAM,WAAU;IAAiD,UAAA;GAAa,CAAA;EACvF;CACH,CAAA,GAAA,CAAC,aACA,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;EAAI,MAAK;EAAY,WAAU;EAC7B,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACD,mBAAAA,MAAD;GAAM,WAAU;GACd,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACE,wBAAAA,WAAD,CAAY,CAAA;EACR,CAAA;CACJ,CAAA,CAEN,EAAA,CAAA;AAEN;;AC3IA,IAAa,4BAA4B;CACvC,SAAS;CACT,MAAM;CAEN,YAAY;AACd"}
+{"version":3,"file":"Breadcrumb.cjs.js","names":["cn","Skeleton","React","_Fragment","controlSizeClasses","controlStateColorTransition","quietTextHoverInGroup","quietTextHover","Icon","PopupAnchorProvider","SlashIcon"],"sources":["../../src/ds/components/Breadcrumb/Breadcrumb.tsx","../../src/ds/components/Breadcrumb/crumb-switcher.ts"],"sourcesContent":["import React from 'react';\n\nimport { Icon } from '../../icons/Icon';\nimport { SlashIcon } from '../../icons/SlashIcon';\nimport { Skeleton } from '@/ds/components/Skeleton';\nimport { controlSizeClasses } from '@/ds/primitives/control-size';\nimport { PopupAnchorProvider } from '@/ds/primitives/popup-anchor';\nimport { controlStateColorTransition } from '@/ds/primitives/transitions';\nimport { quietTextHover, quietTextHoverInGroup } from '@/ds/primitives/typography';\nimport { cn } from '@/lib/utils';\n\nexport interface BreadcrumbProps {\n  children?: React.ReactNode;\n  label?: string;\n  className?: string;\n  listClassName?: string;\n}\n\nexport const Breadcrumb = ({ children, label, className, listClassName }: BreadcrumbProps) => {\n  return (\n    <nav aria-label={label} className={className}>\n      <ol className={cn('flex items-center gap-0.5', listClassName)}>{children}</ol>\n    </nav>\n  );\n};\n\nexport interface CrumbProps {\n  isCurrent?: boolean;\n  as: React.ElementType;\n  className?: string;\n  to?: string;\n  prefetch?: boolean | null;\n  children?: React.ReactNode;\n  /** Prefix icon (bare SVG). The crumb wraps it in `<Icon>` and aligns it like a Button adornment. */\n  icon?: React.ReactNode;\n  /** Renders `CrumbSkeleton` in place of the label. */\n  isLoading?: boolean;\n  /**\n   * Sibling control rendered next to the label (never inside it). Expected to be a\n   * `size=\"icon-sm\"` ghost control, e.g. a CopyButton. Entity switchers go in `switcher`.\n   */\n  action?: React.ReactNode;\n  /**\n   * Entity switcher rendered next to the label; spread `crumbSwitcherTriggerProps` on it.\n   * When the crumb doesn't navigate (current crumb, or no `to`), its hit area covers the whole crumb.\n   */\n  switcher?: React.ReactNode;\n  /** For a crumb that navigates in place (`as=\"button\"`) rather than through a route. */\n  onClick?: React.MouseEventHandler;\n  'data-testid'?: string;\n}\n\nexport const CrumbSkeleton = (props: { 'data-testid'?: string }) => <Skeleton className=\"h-3 w-24\" {...props} />;\n\nexport const Crumb = ({\n  className,\n  as,\n  to,\n  isCurrent,\n  action,\n  switcher,\n  icon,\n  isLoading,\n  children,\n  ...props\n}: CrumbProps) => {\n  const Root = as || 'span';\n  const switcherCoversCrumb = Boolean(switcher && (isCurrent || !to));\n  const crumbRef = React.useRef<HTMLLIElement>(null);\n\n  return (\n    <>\n      <li\n        ref={crumbRef}\n        className={cn(\n          'group flex h-control-sm min-w-0 items-center',\n          isCurrent ? 'shrink' : 'shrink-0',\n          switcherCoversCrumb &&\n            'relative rounded-full has-[[data-slot=crumb-switcher]_[data-popup-open]]:bg-fill-subtle has-[[data-slot=crumb-switcher]_button:enabled]:hover:bg-fill-subtle has-[[data-slot=crumb-switcher]_button:enabled]:active:bg-fill',\n        )}\n      >\n        <Root\n          aria-current={isCurrent ? 'page' : undefined}\n          className={cn(\n            // Same box as `buttonVariants({ variant: 'ghost', size: 'sm' })` so a label and an\n            // icon-sm control sitting next to it share height, radius, padding and colors.\n            'inline-flex min-w-0 items-center gap-2 overflow-hidden rounded-full px-[.9em]',\n            controlSizeClasses.sm,\n            controlStateColorTransition,\n            // Long labels truncate: the current crumb gets more room than nav crumbs.\n            isCurrent\n              ? 'max-w-xs cursor-default text-foreground'\n              : switcherCoversCrumb\n                ? cn(quietTextHoverInGroup, 'max-w-48')\n                : cn(quietTextHover, 'max-w-48 cursor-pointer hover:bg-fill-subtle active:bg-fill'),\n            className,\n          )}\n          to={to}\n          {...props}\n        >\n          {icon && (\n            <Icon\n              className={cn(\n                'ml-[-.3em] shrink-0 opacity-50 group-hover:opacity-100',\n                'transition-opacity duration-normal ease-out-custom',\n              )}\n            >\n              {icon}\n            </Icon>\n          )}\n          {isLoading ? (\n            <CrumbSkeleton />\n          ) : (\n            // `text-overflow` needs a block container, so the label truncates in its\n            // own box rather than on the flex Root. Works for plain strings and for\n            // components that resolve to a string (route-header `Component` crumbs).\n            <span className=\"min-w-0 flex-1 truncate\">{children}</span>\n          )}\n        </Root>\n        {switcher && (\n          <span\n            data-slot=\"crumb-switcher\"\n            className={cn(\n              '-ml-1 flex h-control-sm shrink-0 items-center',\n              switcherCoversCrumb &&\n                '[&_button]:bg-transparent! [&_button:enabled]:after:absolute [&_button:enabled]:after:inset-0 [&_button:enabled]:after:rounded-full',\n            )}\n          >\n            {/* The switcher's popup opens from the crumb's start, like a menu on the whole crumb. */}\n            <PopupAnchorProvider value={crumbRef}>{switcher}</PopupAnchorProvider>\n          </span>\n        )}\n        {action && <span className=\"-ml-1 flex h-control-sm shrink-0 items-center\">{action}</span>}\n      </li>\n      {!isCurrent && (\n        <li role=\"separator\" className=\"flex h-full items-center\">\n          <Icon className=\"text-placeholder\">\n            <SlashIcon />\n          </Icon>\n        </li>\n      )}\n    </>\n  );\n};\n","import type { ComboboxProps } from '../Combobox';\n\nexport const crumbSwitcherTriggerProps = {\n  variant: 'ghost',\n  size: 'icon-sm',\n  // The trigger is just a chevron, so give the popup room for entity names.\n  popupWidth: 'md',\n} as const satisfies Pick<ComboboxProps, 'variant' | 'size' | 'popupWidth'>;\n"],"mappings":";;;;;;;;;;;;;;AAkBA,IAAa,cAAc,EAAE,UAAU,OAAO,WAAW,oBAAqC;CAC5F,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,cAAY;EAAkB;EACjC,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;GAAI,WAAWA,cAAAA,GAAG,6BAA6B,aAAa;GAAI;EAAa,CAAA;CAC1E,CAAA;AAET;AA4BA,IAAa,iBAAiB,UAAsC,iBAAA,GAAA,kBAAA,IAAA,CAACC,4BAAAA,UAAD;CAAU,WAAU;CAAW,GAAI;AAAQ,CAAA;AAE/G,IAAa,SAAS,EACpB,WACA,IACA,IACA,WACA,QACA,UACA,MACA,WACA,UACA,GAAG,YACa;CAChB,MAAM,OAAO,MAAM;CACnB,MAAM,sBAAsB,QAAQ,aAAa,aAAa,CAAC,GAAG;CAClE,MAAM,WAAWC,MAAAA,QAAM,OAAsB,IAAI;CAEjD,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAAC,kBAAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,MAAD;EACE,KAAK;EACL,WAAWH,cAAAA,GACT,gDACA,YAAY,WAAW,YACvB,uBACE,6NACJ;EAPF,UAAA;GASE,iBAAA,GAAA,kBAAA,KAAA,CAAC,MAAD;IACE,gBAAc,YAAY,SAAS,KAAA;IACnC,WAAWA,cAAAA,GAGT,iFACAI,gCAAAA,mBAAmB,IACnBC,+BAAAA,6BAEA,YACI,4CACA,sBACEL,cAAAA,GAAGM,8BAAAA,uBAAuB,UAAU,IACpCN,cAAAA,GAAGO,8BAAAA,gBAAgB,6DAA6D,GACtF,SACF;IACI;IACJ,GAAI;IAjBN,UAAA,CAmBG,QACC,iBAAA,GAAA,kBAAA,IAAA,CAACC,mBAAAA,MAAD;KACE,WAAWR,cAAAA,GACT,0DACA,oDACF;KAEC,UAAA;IACG,CAAA,GAEP,YACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,eAAD,CAAgB,CAAA,IAKhB,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;KAAM,WAAU;KAA2B;IAAe,CAAA,CAExD;;GACL,YACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IACE,aAAU;IACV,WAAWA,cAAAA,GACT,iDACA,uBACE,qIACJ;IAGA,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACS,gCAAAA,qBAAD;KAAqB,OAAO;KAAW,UAAA;IAA8B,CAAA;GACjE,CAAA;GAEP,UAAU,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IAAM,WAAU;IAAiD,UAAA;GAAa,CAAA;EACvF;CACH,CAAA,GAAA,CAAC,aACA,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;EAAI,MAAK;EAAY,WAAU;EAC7B,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACD,mBAAAA,MAAD;GAAM,WAAU;GACd,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACE,wBAAAA,WAAD,CAAY,CAAA;EACR,CAAA;CACJ,CAAA,CAEN,EAAA,CAAA;AAEN;;AC7IA,IAAa,4BAA4B;CACvC,SAAS;CACT,MAAM;CAEN,YAAY;AACd"}

package/dist/components/Breadcrumb.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.es.js","names":["_Fragment"],"sources":["../../src/ds/components/Breadcrumb/Breadcrumb.tsx","../../src/ds/components/Breadcrumb/crumb-switcher.ts"],"sourcesContent":["import React from 'react';\n\nimport { Icon } from '../../icons/Icon';\nimport { SlashIcon } from '../../icons/SlashIcon';\nimport { Skeleton } from '@/ds/components/Skeleton';\nimport { controlSizeClasses } from '@/ds/primitives/control-size';\nimport { PopupAnchorProvider } from '@/ds/primitives/popup-anchor';\nimport { controlStateColorTransition } from '@/ds/primitives/transitions';\nimport { quietTextHover, quietTextHoverInGroup } from '@/ds/primitives/typography';\nimport { cn } from '@/lib/utils';\n\nexport interface BreadcrumbProps {\n  children?: React.ReactNode;\n  label?: string;\n  className?: string;\n  listClassName?: string;\n}\n\nexport const Breadcrumb = ({ children, label, className, listClassName }: BreadcrumbProps) => {\n  return (\n    <nav aria-label={label} className={className}>\n      <ol className={cn('flex items-center gap-0.5', listClassName)}>{children}</ol>\n    </nav>\n  );\n};\n\nexport interface CrumbProps {\n  isCurrent?: boolean;\n  as: React.ElementType;\n  className?: string;\n  to?: string;\n  prefetch?: boolean | null;\n  children?: React.ReactNode;\n  /** Prefix icon (bare SVG). The crumb wraps it in `<Icon>` and aligns it like a Button adornment. */\n  icon?: React.ReactNode;\n  /** Renders `CrumbSkeleton` in place of the label. */\n  isLoading?: boolean;\n  /**\n   * Sibling control rendered next to the label (never inside it). Expected to be a\n   * `size=\"icon-sm\"` ghost control, e.g. a CopyButton. Entity switchers go in `switcher`.\n   */\n  action?: React.ReactNode;\n  /**\n   * Entity switcher rendered next to the label; spread `crumbSwitcherTriggerProps` on it.\n   * When the crumb doesn't navigate (current crumb, or no `to`), its hit area covers the whole crumb.\n   */\n  switcher?: React.ReactNode;\n  'data-testid'?: string;\n}\n\nexport const CrumbSkeleton = (props: { 'data-testid'?: string }) => <Skeleton className=\"h-3 w-24\" {...props} />;\n\nexport const Crumb = ({\n  className,\n  as,\n  to,\n  isCurrent,\n  action,\n  switcher,\n  icon,\n  isLoading,\n  children,\n  ...props\n}: CrumbProps) => {\n  const Root = as || 'span';\n  const switcherCoversCrumb = Boolean(switcher && (isCurrent || !to));\n  const crumbRef = React.useRef<HTMLLIElement>(null);\n\n  return (\n    <>\n      <li\n        ref={crumbRef}\n        className={cn(\n          'group flex h-control-sm min-w-0 items-center',\n          isCurrent ? 'shrink' : 'shrink-0',\n          switcherCoversCrumb &&\n            'relative rounded-full has-[[data-slot=crumb-switcher]_[data-popup-open]]:bg-fill-subtle has-[[data-slot=crumb-switcher]_button:enabled]:hover:bg-fill-subtle has-[[data-slot=crumb-switcher]_button:enabled]:active:bg-fill',\n        )}\n      >\n        <Root\n          aria-current={isCurrent ? 'page' : undefined}\n          className={cn(\n            // Same box as `buttonVariants({ variant: 'ghost', size: 'sm' })` so a label and an\n            // icon-sm control sitting next to it share height, radius, padding and colors.\n            'inline-flex min-w-0 items-center gap-2 overflow-hidden rounded-full px-[.9em]',\n            controlSizeClasses.sm,\n            controlStateColorTransition,\n            // Long labels truncate: the current crumb gets more room than nav crumbs.\n            isCurrent\n              ? 'max-w-xs cursor-default text-foreground'\n              : switcherCoversCrumb\n                ? cn(quietTextHoverInGroup, 'max-w-48')\n                : cn(quietTextHover, 'max-w-48 cursor-pointer hover:bg-fill-subtle active:bg-fill'),\n            className,\n          )}\n          to={to}\n          {...props}\n        >\n          {icon && (\n            <Icon\n              className={cn(\n                'ml-[-.3em] shrink-0 opacity-50 group-hover:opacity-100',\n                'transition-opacity duration-normal ease-out-custom',\n              )}\n            >\n              {icon}\n            </Icon>\n          )}\n          {isLoading ? (\n            <CrumbSkeleton />\n          ) : (\n            // `text-overflow` needs a block container, so the label truncates in its\n            // own box rather than on the flex Root. Works for plain strings and for\n            // components that resolve to a string (route-header `Component` crumbs).\n            <span className=\"min-w-0 flex-1 truncate\">{children}</span>\n          )}\n        </Root>\n        {switcher && (\n          <span\n            data-slot=\"crumb-switcher\"\n            className={cn(\n              '-ml-1 flex h-control-sm shrink-0 items-center',\n              switcherCoversCrumb &&\n                '[&_button]:bg-transparent! [&_button:enabled]:after:absolute [&_button:enabled]:after:inset-0 [&_button:enabled]:after:rounded-full',\n            )}\n          >\n            {/* The switcher's popup opens from the crumb's start, like a menu on the whole crumb. */}\n            <PopupAnchorProvider value={crumbRef}>{switcher}</PopupAnchorProvider>\n          </span>\n        )}\n        {action && <span className=\"-ml-1 flex h-control-sm shrink-0 items-center\">{action}</span>}\n      </li>\n      {!isCurrent && (\n        <li role=\"separator\" className=\"flex h-full items-center\">\n          <Icon className=\"text-placeholder\">\n            <SlashIcon />\n          </Icon>\n        </li>\n      )}\n    </>\n  );\n};\n","import type { ComboboxProps } from '../Combobox';\n\nexport const crumbSwitcherTriggerProps = {\n  variant: 'ghost',\n  size: 'icon-sm',\n  // The trigger is just a chevron, so give the popup room for entity names.\n  popupWidth: 'md',\n} as const satisfies Pick<ComboboxProps, 'variant' | 'size' | 'popupWidth'>;\n"],"mappings":";;;;;;;;;;;AAkBA,IAAa,cAAc,EAAE,UAAU,OAAO,WAAW,oBAAqC;CAC5F,OACE,oBAAC,OAAD;EAAK,cAAY;EAAkB;EACjC,UAAA,oBAAC,MAAD;GAAI,WAAW,GAAG,6BAA6B,aAAa;GAAI;EAAa,CAAA;CAC1E,CAAA;AAET;AA0BA,IAAa,iBAAiB,UAAsC,oBAAC,UAAD;CAAU,WAAU;CAAW,GAAI;AAAQ,CAAA;AAE/G,IAAa,SAAS,EACpB,WACA,IACA,IACA,WACA,QACA,UACA,MACA,WACA,UACA,GAAG,YACa;CAChB,MAAM,OAAO,MAAM;CACnB,MAAM,sBAAsB,QAAQ,aAAa,aAAa,CAAC,GAAG;CAClE,MAAM,WAAW,MAAM,OAAsB,IAAI;CAEjD,OACE,qBAAAA,YAAA,EAAA,UAAA,CACE,qBAAC,MAAD;EACE,KAAK;EACL,WAAW,GACT,gDACA,YAAY,WAAW,YACvB,uBACE,6NACJ;EAPF,UAAA;GASE,qBAAC,MAAD;IACE,gBAAc,YAAY,SAAS,KAAA;IACnC,WAAW,GAGT,iFACA,mBAAmB,IACnB,6BAEA,YACI,4CACA,sBACE,GAAG,uBAAuB,UAAU,IACpC,GAAG,gBAAgB,6DAA6D,GACtF,SACF;IACI;IACJ,GAAI;IAjBN,UAAA,CAmBG,QACC,oBAAC,MAAD;KACE,WAAW,GACT,0DACA,oDACF;KAEC,UAAA;IACG,CAAA,GAEP,YACC,oBAAC,eAAD,CAAgB,CAAA,IAKhB,oBAAC,QAAD;KAAM,WAAU;KAA2B;IAAe,CAAA,CAExD;;GACL,YACC,oBAAC,QAAD;IACE,aAAU;IACV,WAAW,GACT,iDACA,uBACE,qIACJ;IAGA,UAAA,oBAAC,qBAAD;KAAqB,OAAO;KAAW,UAAA;IAA8B,CAAA;GACjE,CAAA;GAEP,UAAU,oBAAC,QAAD;IAAM,WAAU;IAAiD,UAAA;GAAa,CAAA;EACvF;CACH,CAAA,GAAA,CAAC,aACA,oBAAC,MAAD;EAAI,MAAK;EAAY,WAAU;EAC7B,UAAA,oBAAC,MAAD;GAAM,WAAU;GACd,UAAA,oBAAC,WAAD,CAAY,CAAA;EACR,CAAA;CACJ,CAAA,CAEN,EAAA,CAAA;AAEN;;AC3IA,IAAa,4BAA4B;CACvC,SAAS;CACT,MAAM;CAEN,YAAY;AACd"}
+{"version":3,"file":"Breadcrumb.es.js","names":["_Fragment"],"sources":["../../src/ds/components/Breadcrumb/Breadcrumb.tsx","../../src/ds/components/Breadcrumb/crumb-switcher.ts"],"sourcesContent":["import React from 'react';\n\nimport { Icon } from '../../icons/Icon';\nimport { SlashIcon } from '../../icons/SlashIcon';\nimport { Skeleton } from '@/ds/components/Skeleton';\nimport { controlSizeClasses } from '@/ds/primitives/control-size';\nimport { PopupAnchorProvider } from '@/ds/primitives/popup-anchor';\nimport { controlStateColorTransition } from '@/ds/primitives/transitions';\nimport { quietTextHover, quietTextHoverInGroup } from '@/ds/primitives/typography';\nimport { cn } from '@/lib/utils';\n\nexport interface BreadcrumbProps {\n  children?: React.ReactNode;\n  label?: string;\n  className?: string;\n  listClassName?: string;\n}\n\nexport const Breadcrumb = ({ children, label, className, listClassName }: BreadcrumbProps) => {\n  return (\n    <nav aria-label={label} className={className}>\n      <ol className={cn('flex items-center gap-0.5', listClassName)}>{children}</ol>\n    </nav>\n  );\n};\n\nexport interface CrumbProps {\n  isCurrent?: boolean;\n  as: React.ElementType;\n  className?: string;\n  to?: string;\n  prefetch?: boolean | null;\n  children?: React.ReactNode;\n  /** Prefix icon (bare SVG). The crumb wraps it in `<Icon>` and aligns it like a Button adornment. */\n  icon?: React.ReactNode;\n  /** Renders `CrumbSkeleton` in place of the label. */\n  isLoading?: boolean;\n  /**\n   * Sibling control rendered next to the label (never inside it). Expected to be a\n   * `size=\"icon-sm\"` ghost control, e.g. a CopyButton. Entity switchers go in `switcher`.\n   */\n  action?: React.ReactNode;\n  /**\n   * Entity switcher rendered next to the label; spread `crumbSwitcherTriggerProps` on it.\n   * When the crumb doesn't navigate (current crumb, or no `to`), its hit area covers the whole crumb.\n   */\n  switcher?: React.ReactNode;\n  /** For a crumb that navigates in place (`as=\"button\"`) rather than through a route. */\n  onClick?: React.MouseEventHandler;\n  'data-testid'?: string;\n}\n\nexport const CrumbSkeleton = (props: { 'data-testid'?: string }) => <Skeleton className=\"h-3 w-24\" {...props} />;\n\nexport const Crumb = ({\n  className,\n  as,\n  to,\n  isCurrent,\n  action,\n  switcher,\n  icon,\n  isLoading,\n  children,\n  ...props\n}: CrumbProps) => {\n  const Root = as || 'span';\n  const switcherCoversCrumb = Boolean(switcher && (isCurrent || !to));\n  const crumbRef = React.useRef<HTMLLIElement>(null);\n\n  return (\n    <>\n      <li\n        ref={crumbRef}\n        className={cn(\n          'group flex h-control-sm min-w-0 items-center',\n          isCurrent ? 'shrink' : 'shrink-0',\n          switcherCoversCrumb &&\n            'relative rounded-full has-[[data-slot=crumb-switcher]_[data-popup-open]]:bg-fill-subtle has-[[data-slot=crumb-switcher]_button:enabled]:hover:bg-fill-subtle has-[[data-slot=crumb-switcher]_button:enabled]:active:bg-fill',\n        )}\n      >\n        <Root\n          aria-current={isCurrent ? 'page' : undefined}\n          className={cn(\n            // Same box as `buttonVariants({ variant: 'ghost', size: 'sm' })` so a label and an\n            // icon-sm control sitting next to it share height, radius, padding and colors.\n            'inline-flex min-w-0 items-center gap-2 overflow-hidden rounded-full px-[.9em]',\n            controlSizeClasses.sm,\n            controlStateColorTransition,\n            // Long labels truncate: the current crumb gets more room than nav crumbs.\n            isCurrent\n              ? 'max-w-xs cursor-default text-foreground'\n              : switcherCoversCrumb\n                ? cn(quietTextHoverInGroup, 'max-w-48')\n                : cn(quietTextHover, 'max-w-48 cursor-pointer hover:bg-fill-subtle active:bg-fill'),\n            className,\n          )}\n          to={to}\n          {...props}\n        >\n          {icon && (\n            <Icon\n              className={cn(\n                'ml-[-.3em] shrink-0 opacity-50 group-hover:opacity-100',\n                'transition-opacity duration-normal ease-out-custom',\n              )}\n            >\n              {icon}\n            </Icon>\n          )}\n          {isLoading ? (\n            <CrumbSkeleton />\n          ) : (\n            // `text-overflow` needs a block container, so the label truncates in its\n            // own box rather than on the flex Root. Works for plain strings and for\n            // components that resolve to a string (route-header `Component` crumbs).\n            <span className=\"min-w-0 flex-1 truncate\">{children}</span>\n          )}\n        </Root>\n        {switcher && (\n          <span\n            data-slot=\"crumb-switcher\"\n            className={cn(\n              '-ml-1 flex h-control-sm shrink-0 items-center',\n              switcherCoversCrumb &&\n                '[&_button]:bg-transparent! [&_button:enabled]:after:absolute [&_button:enabled]:after:inset-0 [&_button:enabled]:after:rounded-full',\n            )}\n          >\n            {/* The switcher's popup opens from the crumb's start, like a menu on the whole crumb. */}\n            <PopupAnchorProvider value={crumbRef}>{switcher}</PopupAnchorProvider>\n          </span>\n        )}\n        {action && <span className=\"-ml-1 flex h-control-sm shrink-0 items-center\">{action}</span>}\n      </li>\n      {!isCurrent && (\n        <li role=\"separator\" className=\"flex h-full items-center\">\n          <Icon className=\"text-placeholder\">\n            <SlashIcon />\n          </Icon>\n        </li>\n      )}\n    </>\n  );\n};\n","import type { ComboboxProps } from '../Combobox';\n\nexport const crumbSwitcherTriggerProps = {\n  variant: 'ghost',\n  size: 'icon-sm',\n  // The trigger is just a chevron, so give the popup room for entity names.\n  popupWidth: 'md',\n} as const satisfies Pick<ComboboxProps, 'variant' | 'size' | 'popupWidth'>;\n"],"mappings":";;;;;;;;;;;AAkBA,IAAa,cAAc,EAAE,UAAU,OAAO,WAAW,oBAAqC;CAC5F,OACE,oBAAC,OAAD;EAAK,cAAY;EAAkB;EACjC,UAAA,oBAAC,MAAD;GAAI,WAAW,GAAG,6BAA6B,aAAa;GAAI;EAAa,CAAA;CAC1E,CAAA;AAET;AA4BA,IAAa,iBAAiB,UAAsC,oBAAC,UAAD;CAAU,WAAU;CAAW,GAAI;AAAQ,CAAA;AAE/G,IAAa,SAAS,EACpB,WACA,IACA,IACA,WACA,QACA,UACA,MACA,WACA,UACA,GAAG,YACa;CAChB,MAAM,OAAO,MAAM;CACnB,MAAM,sBAAsB,QAAQ,aAAa,aAAa,CAAC,GAAG;CAClE,MAAM,WAAW,MAAM,OAAsB,IAAI;CAEjD,OACE,qBAAAA,YAAA,EAAA,UAAA,CACE,qBAAC,MAAD;EACE,KAAK;EACL,WAAW,GACT,gDACA,YAAY,WAAW,YACvB,uBACE,6NACJ;EAPF,UAAA;GASE,qBAAC,MAAD;IACE,gBAAc,YAAY,SAAS,KAAA;IACnC,WAAW,GAGT,iFACA,mBAAmB,IACnB,6BAEA,YACI,4CACA,sBACE,GAAG,uBAAuB,UAAU,IACpC,GAAG,gBAAgB,6DAA6D,GACtF,SACF;IACI;IACJ,GAAI;IAjBN,UAAA,CAmBG,QACC,oBAAC,MAAD;KACE,WAAW,GACT,0DACA,oDACF;KAEC,UAAA;IACG,CAAA,GAEP,YACC,oBAAC,eAAD,CAAgB,CAAA,IAKhB,oBAAC,QAAD;KAAM,WAAU;KAA2B;IAAe,CAAA,CAExD;;GACL,YACC,oBAAC,QAAD;IACE,aAAU;IACV,WAAW,GACT,iDACA,uBACE,qIACJ;IAGA,UAAA,oBAAC,qBAAD;KAAqB,OAAO;KAAW,UAAA;IAA8B,CAAA;GACjE,CAAA;GAEP,UAAU,oBAAC,QAAD;IAAM,WAAU;IAAiD,UAAA;GAAa,CAAA;EACvF;CACH,CAAA,GAAA,CAAC,aACA,oBAAC,MAAD;EAAI,MAAK;EAAY,WAAU;EAC7B,UAAA,oBAAC,MAAD;GAAM,WAAU;GACd,UAAA,oBAAC,WAAD,CAAY,CAAA;EACR,CAAA;CACJ,CAAA,CAEN,EAAA,CAAA;AAEN;;AC7IA,IAAa,4BAA4B;CACvC,SAAS;CACT,MAAM;CAEN,YAAY;AACd"}

package/dist/components/CodeBlock.cjs.js

@@ -2,7 +2,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_code = require("../code-CqgfD-cP.cjs");
 const require_copy_button = require("../copy-button-DuEUYvS2.cjs");
 const require_select = require("../select-CeukeSn_.cjs");
-const require_tabs_tab = require("../tabs-tab-CANh2eAD.cjs");
+const require_tabs_tab = require("../tabs-tab-Dj2huH5T.cjs");
 const require_primitives_transitions = require("../primitives/transitions.cjs.js");
 const require_utils = require("../utils-uDc1ofX1.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/components/CodeBlock.es.js

@@ -1,7 +1,7 @@
 import { t as Code } from "../code-B7cFirk4.js";
 import { t as CopyButton } from "../copy-button-B-_Z6N6y.js";
 import { i as SelectItem, n as SelectContent, o as SelectTrigger, s as SelectValue, t as Select } from "../select-dNX9If-s.js";
-import { n as Tabs, r as TabList, t as Tab } from "../tabs-tab-BHs639jL.js";
+import { n as Tabs, r as TabList, t as Tab } from "../tabs-tab-CJVS0WED.js";
 import { transitions } from "../primitives/transitions.es.js";
 import { t as cn } from "../utils-DQx8TpNT.js";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/CodeEditor.cjs.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_highlight = require("../highlight-D0VoR2qO.cjs");
-const require_CodeEditor = require("../CodeEditor-DHIDfP5g.cjs");
+const require_CodeEditor = require("../CodeEditor-zMSUzPdX.cjs");
 exports.CodeEditor = require_CodeEditor.CodeEditor;
 exports.VARIABLE_PATTERN = require_CodeEditor.VARIABLE_PATTERN;
 exports.codeFoldGutter = require_CodeEditor.codeFoldGutter;

package/dist/components/CodeEditor.es.js

@@ -1,3 +1,3 @@
 import { n as languageForPath, r as syntaxHighlighter, t as highlight } from "../highlight-DF-vd68d.js";
-import { a as createVariableAutocomplete, c as codeLanguages, i as variableHighlight, n as useCodemirrorTheme, o as flattenSchemaToVariables, r as VARIABLE_PATTERN, s as codeFoldGutter, t as CodeEditor } from "../CodeEditor-ZoBu3Gjw.js";
+import { a as createVariableAutocomplete, c as codeLanguages, i as variableHighlight, n as useCodemirrorTheme, o as flattenSchemaToVariables, r as VARIABLE_PATTERN, s as codeFoldGutter, t as CodeEditor } from "../CodeEditor-BqAM9L7t.js";
 export { CodeEditor, VARIABLE_PATTERN, codeFoldGutter, codeLanguages, createVariableAutocomplete, flattenSchemaToVariables, highlight, languageForPath, syntaxHighlighter, useCodemirrorTheme, variableHighlight };

package/dist/components/Combobox.cjs.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_combobox = require("../combobox-i723LxeC.cjs");
-const require_combobox_parts = require("../combobox-parts-BeNqgCbj.cjs");
+const require_combobox = require("../combobox-DU2jsrGa.cjs");
+const require_combobox_parts = require("../combobox-parts-C236ZHtn.cjs");
 let _base_ui_react_combobox = require("@base-ui/react/combobox");
 exports.Combobox = require_combobox.Combobox;
 exports.ComboboxChip = require_combobox_parts.ComboboxChip;

package/dist/components/Combobox.es.js

@@ -1,4 +1,4 @@
-import { t as Combobox } from "../combobox-lbSxWRMl.js";
-import { C as comboboxStyles, _ as ComboboxRoot, a as ComboboxCollection, b as ComboboxTrigger, c as ComboboxGroup, d as ComboboxItemContent, f as ComboboxItemDescription, g as ComboboxList, h as ComboboxLabel, i as ComboboxClear, l as ComboboxInput, m as ComboboxItemTitle, n as ComboboxChips, o as ComboboxContent, p as ComboboxItemEnd, r as ComboboxChipsInput, s as ComboboxEmpty, t as ComboboxChip, u as ComboboxItem, v as ComboboxSearch, x as ComboboxValue, y as ComboboxSeparator } from "../combobox-parts-C9o4UfH_.js";
+import { t as Combobox } from "../combobox-DLdInLYm.js";
+import { C as comboboxStyles, _ as ComboboxRoot, a as ComboboxCollection, b as ComboboxTrigger, c as ComboboxGroup, d as ComboboxItemContent, f as ComboboxItemDescription, g as ComboboxList, h as ComboboxLabel, i as ComboboxClear, l as ComboboxInput, m as ComboboxItemTitle, n as ComboboxChips, o as ComboboxContent, p as ComboboxItemEnd, r as ComboboxChipsInput, s as ComboboxEmpty, t as ComboboxChip, u as ComboboxItem, v as ComboboxSearch, x as ComboboxValue, y as ComboboxSeparator } from "../combobox-parts-_m3Qgmci.js";
 import { Combobox as ComboboxPrimitive } from "@base-ui/react/combobox";
 export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemContent, ComboboxItemDescription, ComboboxItemEnd, ComboboxItemTitle, ComboboxLabel, ComboboxList, ComboboxPrimitive, ComboboxRoot, ComboboxSearch, ComboboxSeparator, ComboboxTrigger, ComboboxValue, comboboxStyles };

package/dist/components/Command.cjs.js

@@ -97,7 +97,7 @@ var CommandInput = react.forwardRef(({ className, rightSlot, wrapperClassName, .
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Search, { className: require_utils.cn("mr-2 size-4 shrink-0 text-muted-foreground", require_primitives_transitions.transitions.colors) }),
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(cmdk.Command.Input, {
 			ref,
-			className: require_utils.cn("flex h-8 min-w-0 flex-1 rounded-md bg-transparent py-2 text-body-sm text-foreground", "placeholder:text-placeholder disabled:cursor-not-allowed disabled:opacity-50", "outline-none focus:outline-none focus-visible:outline-none", require_primitives_transitions.transitions.colors, className),
+			className: require_utils.cn("flex h-8 min-w-0 flex-1 rounded-md bg-transparent py-2 text-body-sm zoom-safe-text text-foreground", "placeholder:text-placeholder disabled:cursor-not-allowed disabled:opacity-50", "outline-none focus:outline-none focus-visible:outline-none", require_primitives_transitions.transitions.colors, className),
 			...props,
 			...require_primitives_password_manager_autofill.passwordManagerOptOutProps
 		}),

package/dist/components/Command.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Command.cjs.js","names":["React","CommandPrimitive","cn","_Fragment","Dialog","DialogContent","DialogTitle","DialogDescription","transitions","Search","passwordManagerOptOutProps","ScrollArea","ScrollAreaViewport","controlIconState","Txt"],"sources":["../../src/ds/components/Command/command.tsx"],"sourcesContent":["import { Command as CommandPrimitive } from 'cmdk';\nimport { Search } from 'lucide-react';\nimport * as React from 'react';\n\nimport { Dialog, DialogContent, DialogDescription, DialogTitle } from '@/ds/components/Dialog';\nimport type { DialogSize } from '@/ds/components/Dialog';\nimport { ScrollArea, ScrollAreaViewport } from '@/ds/components/ScrollArea';\nimport type { ScrollAreaMask } from '@/ds/components/ScrollArea';\nimport { Txt } from '@/ds/components/Txt';\nimport { controlIconState } from '@/ds/primitives/control-icon';\nimport { passwordManagerOptOutProps } from '@/ds/primitives/password-manager-autofill';\nimport { heightTransition, transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nconst Command = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive\n    ref={ref}\n    className={cn(\n      'flex size-full flex-col overflow-hidden rounded-xl bg-card text-muted-foreground in-data-[slot=dialog-content]:bg-transparent',\n      className,\n    )}\n    {...props}\n  />\n));\nCommand.displayName = CommandPrimitive.displayName;\n\ntype CommandDialogVariant = 'default' | 'inset';\n\nconst commandDialogContentClasses: Record<CommandDialogVariant, string> = {\n  default: 'overflow-hidden py-0',\n  inset: 'overflow-hidden sm:top-1/4 sm:translate-y-0 rounded-[calc(var(--radius-xl)+--spacing(1))] bg-muted p-1',\n};\n\nconst commandDialogCommandClasses: Record<CommandDialogVariant, string> = {\n  default: cn(\n    '[&_[data-slot=command-input-wrapper]_svg]:size-5',\n    '**:[[cmdk-input]]:h-12',\n    '[&_[cmdk-item]_svg]:size-5',\n  ),\n  inset: cn(\n    'gap-1',\n    '[&_[data-slot=command-input-wrapper]_svg]:size-icon-md',\n    '**:[[cmdk-input]]:h-11 **:[[cmdk-input]]:text-label',\n    '[&_[cmdk-item]_svg]:size-icon-sm',\n    '**:[[cmdk-empty]]:px-4 **:[[cmdk-empty]]:pt-3 **:[[cmdk-empty]]:pb-1 **:[[cmdk-empty]]:text-left **:[[cmdk-empty]]:text-caption',\n  ),\n};\n\nconst commandDialogHeadingCase: Record<CommandDialogVariant, 'upper' | 'sentence'> = {\n  default: 'upper',\n  inset: 'sentence',\n};\n\nconst CommandDialogVariantContext = React.createContext<CommandDialogVariant>('default');\n\nconst CommandDialogBody = ({\n  variant,\n  footer,\n  children,\n}: {\n  variant: CommandDialogVariant;\n  footer?: React.ReactNode;\n  children?: React.ReactNode;\n}) => {\n  if (variant === 'default') return children;\n\n  return (\n    <>\n      <div\n        data-slot=\"command-dialog-panel\"\n        className=\"flex min-h-0 flex-1 flex-col overflow-hidden rounded-xl bg-background\"\n      >\n        {children}\n      </div>\n      {footer && (\n        <div data-slot=\"command-dialog-footer\" className=\"flex items-center justify-between gap-3 pr-1\">\n          {footer}\n        </div>\n      )}\n    </>\n  );\n};\n\ntype CommandDialogBaseProps = Omit<React.ComponentPropsWithoutRef<typeof Dialog>, 'children'> & {\n  children?: React.ReactNode;\n  title?: string;\n  description?: string;\n  size?: DialogSize;\n  contentClassName?: string;\n  commandClassName?: string;\n  commandLabel?: string;\n  showOverlay?: boolean;\n  overlayClassName?: string;\n};\n\ntype CommandDialogProps = CommandDialogBaseProps &\n  ({ variant?: 'default'; footer?: never } | { variant: 'inset'; footer?: React.ReactNode });\n\nconst CommandDialog = ({\n  children,\n  variant = 'default',\n  footer,\n  title = 'Command Palette',\n  description = 'Search for commands and actions',\n  size,\n  contentClassName,\n  commandClassName,\n  commandLabel,\n  showOverlay = false,\n  overlayClassName,\n  ...props\n}: CommandDialogProps) => {\n  const filter = React.useCallback((value: string, search: string) => {\n    const normalizedValue = value.toLowerCase();\n    const normalizedSearch = search.toLowerCase();\n    const searchTerms = normalizedSearch.split(/\\s+/).filter(Boolean);\n\n    const matches = searchTerms.every(term => normalizedValue.includes(term));\n    return matches ? 1 : 0;\n  }, []);\n\n  const handleKeyDown = React.useCallback((e: React.KeyboardEvent) => {\n    if (e.key === 'Escape') return;\n\n    e.stopPropagation();\n  }, []);\n\n  return (\n    <Dialog {...props}>\n      <DialogContent\n        size={size}\n        showOverlay={showOverlay}\n        showCloseButton={variant !== 'inset'}\n        overlayClassName={overlayClassName}\n        className={cn(commandDialogContentClasses[variant], contentClassName)}\n      >\n        <DialogTitle className=\"sr-only\">{title}</DialogTitle>\n        <DialogDescription className=\"sr-only\">{description}</DialogDescription>\n        <Command\n          label={commandLabel}\n          loop\n          filter={filter}\n          onKeyDown={handleKeyDown}\n          data-heading-case={commandDialogHeadingCase[variant]}\n          className={cn(\n            '**:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:text-column **:[[cmdk-group-heading]]:text-muted-foreground',\n            '[&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 **:[[cmdk-group]]:px-2',\n            '**:[[cmdk-item]]:p-2',\n            commandDialogCommandClasses[variant],\n            commandClassName,\n          )}\n        >\n          <CommandDialogVariantContext.Provider value={variant}>\n            <CommandDialogBody variant={variant} footer={footer}>\n              {children}\n            </CommandDialogBody>\n          </CommandDialogVariantContext.Provider>\n        </Command>\n      </DialogContent>\n    </Dialog>\n  );\n};\n\ntype CommandInputProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input> & {\n  rightSlot?: React.ReactNode;\n  wrapperClassName?: string;\n};\n\nconst CommandInput = React.forwardRef<React.ElementRef<typeof CommandPrimitive.Input>, CommandInputProps>(\n  ({ className, rightSlot, wrapperClassName, ...props }, ref) => (\n    <div\n      data-slot=\"command-input-wrapper\"\n      className={cn('flex items-center border-b border-border px-3', transitions.colors, wrapperClassName)}\n    >\n      <Search className={cn('mr-2 size-4 shrink-0 text-muted-foreground', transitions.colors)} />\n      {/* cmdk renders autocomplete=\"off\" itself; a command search is never a credential field. */}\n      <CommandPrimitive.Input\n        ref={ref}\n        className={cn(\n          'flex h-8 min-w-0 flex-1 rounded-md bg-transparent py-2 text-body-sm text-foreground',\n          'placeholder:text-placeholder disabled:cursor-not-allowed disabled:opacity-50',\n          'outline-none focus:outline-none focus-visible:outline-none',\n          transitions.colors,\n          className,\n        )}\n        {...props}\n        {...passwordManagerOptOutProps}\n      />\n      {rightSlot && (\n        <div data-slot=\"command-input-right-slot\" className=\"ml-2 flex shrink-0 items-center text-muted-foreground\">\n          {rightSlot}\n        </div>\n      )}\n    </div>\n  ),\n);\nCommandInput.displayName = CommandPrimitive.Input.displayName;\n\ntype CommandListProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.List> & {\n  scrollArea?: boolean;\n  scrollAreaClassName?: string;\n  scrollAreaViewportClassName?: string;\n  scrollAreaMask?: ScrollAreaMask;\n};\n\nconst CommandList = React.forwardRef<React.ElementRef<typeof CommandPrimitive.List>, CommandListProps>(\n  (\n    {\n      className,\n      children,\n      scrollArea = false,\n      scrollAreaClassName,\n      scrollAreaViewportClassName,\n      scrollAreaMask,\n      ...props\n    },\n    ref,\n  ) => {\n    const animateHeight = React.useContext(CommandDialogVariantContext) === 'inset';\n    const list = (\n      <CommandPrimitive.List\n        className={cn(\n          'outline-none focus:outline-none focus-visible:outline-none',\n          scrollArea ? 'overflow-visible' : 'max-h-dropdown overflow-x-hidden overflow-y-auto',\n          animateHeight && cn('h-(--cmdk-list-height)', heightTransition),\n          className,\n        )}\n        {...props}\n        ref={ref}\n      >\n        {children}\n      </CommandPrimitive.List>\n    );\n\n    if (!scrollArea) return list;\n\n    // The list fills Command's `rounded-xl` box, so its scrollbar takes that radius's inset.\n    return (\n      <ScrollArea className={cn('min-h-0 scrollbar-inset-xl', scrollAreaClassName)} mask={scrollAreaMask}>\n        <ScrollAreaViewport className={scrollAreaViewportClassName}>{list}</ScrollAreaViewport>\n      </ScrollArea>\n    );\n  },\n);\nCommandList.displayName = CommandPrimitive.List.displayName;\n\nconst CommandEmpty = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Empty>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>((props, ref) => (\n  <CommandPrimitive.Empty ref={ref} className=\"py-6 text-center text-body-sm text-muted-foreground\" {...props} />\n));\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName;\n\nconst CommandGroup = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Group>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Group\n    ref={ref}\n    className={cn(\n      'overflow-hidden p-1 text-muted-foreground',\n      '**:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:pt-1.5 **:[[cmdk-group-heading]]:pb-1 **:[[cmdk-group-heading]]:text-muted-foreground',\n      '[&_[cmdk-group-heading]]:text-meta [&_[cmdk-group-heading]]:uppercase',\n      'in-data-[heading-case=sentence]:**:[[cmdk-group-heading]]:tracking-normal in-data-[heading-case=sentence]:**:[[cmdk-group-heading]]:normal-case',\n      className,\n    )}\n    {...props}\n  />\n));\nCommandGroup.displayName = CommandPrimitive.Group.displayName;\n\nconst CommandSeparator = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Separator ref={ref} className={cn('-mx-1 h-px bg-border', className)} {...props} />\n));\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName;\n\nconst CommandItem = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Item\n    ref={ref}\n    className={cn(\n      'relative flex cursor-pointer items-center gap-2.5 rounded-lg px-2 py-1.5 text-body-sm text-muted-foreground select-none',\n      'outline-none focus:outline-none focus-visible:outline-none',\n      // cmdk's selection follows both the pointer and the arrow keys; the row paints it instantly.\n      'data-[selected=true]:bg-fill data-[selected=true]:text-foreground',\n      'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',\n      '[&_svg]:pointer-events-none [&>svg]:size-4 [&>svg]:shrink-0',\n      controlIconState,\n      // A selected row brightens its icon with its label, like a highlighted menu row.\n      '[--control-icon-hover:var(--foreground)] data-[selected=true]:[--control-icon:var(--control-icon-hover)]',\n      className,\n    )}\n    {...props}\n  />\n));\nCommandItem.displayName = CommandPrimitive.Item.displayName;\n\nconst CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <Txt\n      as=\"span\"\n      variant=\"meta\"\n      tone=\"muted\"\n      className={cn('ml-auto tracking-wider tabular-nums', className)}\n      {...props}\n    />\n  );\n};\nCommandShortcut.displayName = 'CommandShortcut';\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandSeparator,\n  CommandShortcut,\n};\n"],"mappings":"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"}
+{"version":3,"file":"Command.cjs.js","names":["React","CommandPrimitive","cn","_Fragment","Dialog","DialogContent","DialogTitle","DialogDescription","transitions","Search","passwordManagerOptOutProps","ScrollArea","ScrollAreaViewport","controlIconState","Txt"],"sources":["../../src/ds/components/Command/command.tsx"],"sourcesContent":["import { Command as CommandPrimitive } from 'cmdk';\nimport { Search } from 'lucide-react';\nimport * as React from 'react';\n\nimport { Dialog, DialogContent, DialogDescription, DialogTitle } from '@/ds/components/Dialog';\nimport type { DialogSize } from '@/ds/components/Dialog';\nimport { ScrollArea, ScrollAreaViewport } from '@/ds/components/ScrollArea';\nimport type { ScrollAreaMask } from '@/ds/components/ScrollArea';\nimport { Txt } from '@/ds/components/Txt';\nimport { controlIconState } from '@/ds/primitives/control-icon';\nimport { passwordManagerOptOutProps } from '@/ds/primitives/password-manager-autofill';\nimport { heightTransition, transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nconst Command = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive\n    ref={ref}\n    className={cn(\n      'flex size-full flex-col overflow-hidden rounded-xl bg-card text-muted-foreground in-data-[slot=dialog-content]:bg-transparent',\n      className,\n    )}\n    {...props}\n  />\n));\nCommand.displayName = CommandPrimitive.displayName;\n\ntype CommandDialogVariant = 'default' | 'inset';\n\nconst commandDialogContentClasses: Record<CommandDialogVariant, string> = {\n  default: 'overflow-hidden py-0',\n  inset: 'overflow-hidden sm:top-1/4 sm:translate-y-0 rounded-[calc(var(--radius-xl)+--spacing(1))] bg-muted p-1',\n};\n\nconst commandDialogCommandClasses: Record<CommandDialogVariant, string> = {\n  default: cn(\n    '[&_[data-slot=command-input-wrapper]_svg]:size-5',\n    '**:[[cmdk-input]]:h-12',\n    '[&_[cmdk-item]_svg]:size-5',\n  ),\n  inset: cn(\n    'gap-1',\n    '[&_[data-slot=command-input-wrapper]_svg]:size-icon-md',\n    '**:[[cmdk-input]]:h-11 **:[[cmdk-input]]:text-label',\n    '[&_[cmdk-item]_svg]:size-icon-sm',\n    '**:[[cmdk-empty]]:px-4 **:[[cmdk-empty]]:pt-3 **:[[cmdk-empty]]:pb-1 **:[[cmdk-empty]]:text-left **:[[cmdk-empty]]:text-caption',\n  ),\n};\n\nconst commandDialogHeadingCase: Record<CommandDialogVariant, 'upper' | 'sentence'> = {\n  default: 'upper',\n  inset: 'sentence',\n};\n\nconst CommandDialogVariantContext = React.createContext<CommandDialogVariant>('default');\n\nconst CommandDialogBody = ({\n  variant,\n  footer,\n  children,\n}: {\n  variant: CommandDialogVariant;\n  footer?: React.ReactNode;\n  children?: React.ReactNode;\n}) => {\n  if (variant === 'default') return children;\n\n  return (\n    <>\n      <div\n        data-slot=\"command-dialog-panel\"\n        className=\"flex min-h-0 flex-1 flex-col overflow-hidden rounded-xl bg-background\"\n      >\n        {children}\n      </div>\n      {footer && (\n        <div data-slot=\"command-dialog-footer\" className=\"flex items-center justify-between gap-3 pr-1\">\n          {footer}\n        </div>\n      )}\n    </>\n  );\n};\n\ntype CommandDialogBaseProps = Omit<React.ComponentPropsWithoutRef<typeof Dialog>, 'children'> & {\n  children?: React.ReactNode;\n  title?: string;\n  description?: string;\n  size?: DialogSize;\n  contentClassName?: string;\n  commandClassName?: string;\n  commandLabel?: string;\n  showOverlay?: boolean;\n  overlayClassName?: string;\n};\n\ntype CommandDialogProps = CommandDialogBaseProps &\n  ({ variant?: 'default'; footer?: never } | { variant: 'inset'; footer?: React.ReactNode });\n\nconst CommandDialog = ({\n  children,\n  variant = 'default',\n  footer,\n  title = 'Command Palette',\n  description = 'Search for commands and actions',\n  size,\n  contentClassName,\n  commandClassName,\n  commandLabel,\n  showOverlay = false,\n  overlayClassName,\n  ...props\n}: CommandDialogProps) => {\n  const filter = React.useCallback((value: string, search: string) => {\n    const normalizedValue = value.toLowerCase();\n    const normalizedSearch = search.toLowerCase();\n    const searchTerms = normalizedSearch.split(/\\s+/).filter(Boolean);\n\n    const matches = searchTerms.every(term => normalizedValue.includes(term));\n    return matches ? 1 : 0;\n  }, []);\n\n  const handleKeyDown = React.useCallback((e: React.KeyboardEvent) => {\n    if (e.key === 'Escape') return;\n\n    e.stopPropagation();\n  }, []);\n\n  return (\n    <Dialog {...props}>\n      <DialogContent\n        size={size}\n        showOverlay={showOverlay}\n        showCloseButton={variant !== 'inset'}\n        overlayClassName={overlayClassName}\n        className={cn(commandDialogContentClasses[variant], contentClassName)}\n      >\n        <DialogTitle className=\"sr-only\">{title}</DialogTitle>\n        <DialogDescription className=\"sr-only\">{description}</DialogDescription>\n        <Command\n          label={commandLabel}\n          loop\n          filter={filter}\n          onKeyDown={handleKeyDown}\n          data-heading-case={commandDialogHeadingCase[variant]}\n          className={cn(\n            '**:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:text-column **:[[cmdk-group-heading]]:text-muted-foreground',\n            '[&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 **:[[cmdk-group]]:px-2',\n            '**:[[cmdk-item]]:p-2',\n            commandDialogCommandClasses[variant],\n            commandClassName,\n          )}\n        >\n          <CommandDialogVariantContext.Provider value={variant}>\n            <CommandDialogBody variant={variant} footer={footer}>\n              {children}\n            </CommandDialogBody>\n          </CommandDialogVariantContext.Provider>\n        </Command>\n      </DialogContent>\n    </Dialog>\n  );\n};\n\ntype CommandInputProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input> & {\n  rightSlot?: React.ReactNode;\n  wrapperClassName?: string;\n};\n\nconst CommandInput = React.forwardRef<React.ElementRef<typeof CommandPrimitive.Input>, CommandInputProps>(\n  ({ className, rightSlot, wrapperClassName, ...props }, ref) => (\n    <div\n      data-slot=\"command-input-wrapper\"\n      className={cn('flex items-center border-b border-border px-3', transitions.colors, wrapperClassName)}\n    >\n      <Search className={cn('mr-2 size-4 shrink-0 text-muted-foreground', transitions.colors)} />\n      {/* cmdk renders autocomplete=\"off\" itself; a command search is never a credential field. */}\n      <CommandPrimitive.Input\n        ref={ref}\n        className={cn(\n          'flex h-8 min-w-0 flex-1 rounded-md bg-transparent py-2 text-body-sm zoom-safe-text text-foreground',\n          'placeholder:text-placeholder disabled:cursor-not-allowed disabled:opacity-50',\n          'outline-none focus:outline-none focus-visible:outline-none',\n          transitions.colors,\n          className,\n        )}\n        {...props}\n        {...passwordManagerOptOutProps}\n      />\n      {rightSlot && (\n        <div data-slot=\"command-input-right-slot\" className=\"ml-2 flex shrink-0 items-center text-muted-foreground\">\n          {rightSlot}\n        </div>\n      )}\n    </div>\n  ),\n);\nCommandInput.displayName = CommandPrimitive.Input.displayName;\n\ntype CommandListProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.List> & {\n  scrollArea?: boolean;\n  scrollAreaClassName?: string;\n  scrollAreaViewportClassName?: string;\n  scrollAreaMask?: ScrollAreaMask;\n};\n\nconst CommandList = React.forwardRef<React.ElementRef<typeof CommandPrimitive.List>, CommandListProps>(\n  (\n    {\n      className,\n      children,\n      scrollArea = false,\n      scrollAreaClassName,\n      scrollAreaViewportClassName,\n      scrollAreaMask,\n      ...props\n    },\n    ref,\n  ) => {\n    const animateHeight = React.useContext(CommandDialogVariantContext) === 'inset';\n    const list = (\n      <CommandPrimitive.List\n        className={cn(\n          'outline-none focus:outline-none focus-visible:outline-none',\n          scrollArea ? 'overflow-visible' : 'max-h-dropdown overflow-x-hidden overflow-y-auto',\n          animateHeight && cn('h-(--cmdk-list-height)', heightTransition),\n          className,\n        )}\n        {...props}\n        ref={ref}\n      >\n        {children}\n      </CommandPrimitive.List>\n    );\n\n    if (!scrollArea) return list;\n\n    // The list fills Command's `rounded-xl` box, so its scrollbar takes that radius's inset.\n    return (\n      <ScrollArea className={cn('min-h-0 scrollbar-inset-xl', scrollAreaClassName)} mask={scrollAreaMask}>\n        <ScrollAreaViewport className={scrollAreaViewportClassName}>{list}</ScrollAreaViewport>\n      </ScrollArea>\n    );\n  },\n);\nCommandList.displayName = CommandPrimitive.List.displayName;\n\nconst CommandEmpty = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Empty>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>((props, ref) => (\n  <CommandPrimitive.Empty ref={ref} className=\"py-6 text-center text-body-sm text-muted-foreground\" {...props} />\n));\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName;\n\nconst CommandGroup = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Group>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Group\n    ref={ref}\n    className={cn(\n      'overflow-hidden p-1 text-muted-foreground',\n      '**:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:pt-1.5 **:[[cmdk-group-heading]]:pb-1 **:[[cmdk-group-heading]]:text-muted-foreground',\n      '[&_[cmdk-group-heading]]:text-meta [&_[cmdk-group-heading]]:uppercase',\n      'in-data-[heading-case=sentence]:**:[[cmdk-group-heading]]:tracking-normal in-data-[heading-case=sentence]:**:[[cmdk-group-heading]]:normal-case',\n      className,\n    )}\n    {...props}\n  />\n));\nCommandGroup.displayName = CommandPrimitive.Group.displayName;\n\nconst CommandSeparator = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Separator ref={ref} className={cn('-mx-1 h-px bg-border', className)} {...props} />\n));\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName;\n\nconst CommandItem = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Item\n    ref={ref}\n    className={cn(\n      'relative flex cursor-pointer items-center gap-2.5 rounded-lg px-2 py-1.5 text-body-sm text-muted-foreground select-none',\n      'outline-none focus:outline-none focus-visible:outline-none',\n      // cmdk's selection follows both the pointer and the arrow keys; the row paints it instantly.\n      'data-[selected=true]:bg-fill data-[selected=true]:text-foreground',\n      'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',\n      '[&_svg]:pointer-events-none [&>svg]:size-4 [&>svg]:shrink-0',\n      controlIconState,\n      // A selected row brightens its icon with its label, like a highlighted menu row.\n      '[--control-icon-hover:var(--foreground)] data-[selected=true]:[--control-icon:var(--control-icon-hover)]',\n      className,\n    )}\n    {...props}\n  />\n));\nCommandItem.displayName = CommandPrimitive.Item.displayName;\n\nconst CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <Txt\n      as=\"span\"\n      variant=\"meta\"\n      tone=\"muted\"\n      className={cn('ml-auto tracking-wider tabular-nums', className)}\n      {...props}\n    />\n  );\n};\nCommandShortcut.displayName = 'CommandShortcut';\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandSeparator,\n  CommandShortcut,\n};\n"],"mappings":";;;;;;;;;;;;;;;AAcA,IAAM,UAAUA,MAAM,YAGnB,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,IAAA,CAACC,KAAAA,SAAD;CACO;CACL,WAAWC,cAAAA,GACT,iIACA,SACF;CACA,GAAI;AACL,CAAA,CACF;AACD,QAAQ,cAAcD,KAAAA,QAAiB;AAIvC,IAAM,8BAAoE;CACxE,SAAS;CACT,OAAO;AACT;AAEA,IAAM,8BAAoE;CACxE,SAASC,cAAAA,GACP,oDACA,0BACA,4BACF;CACA,OAAOA,cAAAA,GACL,SACA,0DACA,uDACA,oCACA,iIACF;AACF;AAEA,IAAM,2BAA+E;CACnF,SAAS;CACT,OAAO;AACT;AAEA,IAAM,8BAA8BF,MAAM,cAAoC,SAAS;AAEvF,IAAM,qBAAqB,EACzB,SACA,QACA,eAKI;CACJ,IAAI,YAAY,WAAW,OAAO;CAElC,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAAG,kBAAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,aAAU;EACV,WAAU;EAET;CACE,CAAA,GACJ,UACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,aAAU;EAAwB,WAAU;EAC9C,UAAA;CACE,CAAA,CAEP,EAAA,CAAA;AAEN;AAiBA,IAAM,iBAAiB,EACrB,UACA,UAAU,WACV,QACA,QAAQ,mBACR,cAAc,mCACd,MACA,kBACA,kBACA,cACA,cAAc,OACd,kBACA,GAAG,YACqB;CACxB,MAAM,SAASH,MAAM,aAAa,OAAe,WAAmB;EAClE,MAAM,kBAAkB,MAAM,YAAY;EAK1C,OAJyB,OAAO,YACZ,CAAA,CAAiB,MAAM,KAAK,CAAC,CAAC,OAAO,OAEzC,CAAA,CAAY,OAAM,SAAQ,gBAAgB,SAAS,IAAI,CAChE,IAAU,IAAI;CACvB,GAAG,CAAC,CAAC;CAEL,MAAM,gBAAgBA,MAAM,aAAa,MAA2B;EAClE,IAAI,EAAE,QAAQ,UAAU;EAExB,EAAE,gBAAgB;CACpB,GAAG,CAAC,CAAC;CAEL,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACI,eAAAA,QAAD;EAAQ,GAAI;EACV,UAAA,iBAAA,GAAA,kBAAA,KAAA,CAACC,eAAAA,eAAD;GACQ;GACO;GACb,iBAAiB,YAAY;GACX;GAClB,WAAWH,cAAAA,GAAG,4BAA4B,UAAU,gBAAgB;GALtE,UAAA;IAOE,iBAAA,GAAA,kBAAA,IAAA,CAACI,eAAAA,aAAD;KAAa,WAAU;KAAW,UAAA;IAAmB,CAAA;IACrD,iBAAA,GAAA,kBAAA,IAAA,CAACC,eAAAA,mBAAD;KAAmB,WAAU;KAAW,UAAA;IAA+B,CAAA;IACvE,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;KACE,OAAO;KACP,MAAA;KACQ;KACR,WAAW;KACX,qBAAmB,yBAAyB;KAC5C,WAAWL,cAAAA,GACT,wHACA,4EACA,wBACA,4BAA4B,UAC5B,gBACF;KAEA,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,4BAA4B,UAA7B;MAAsC,OAAO;MAC3C,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,mBAAD;OAA4B;OAAiB;OAC1C;MACgB,CAAA;KACiB,CAAA;IAC/B,CAAA;GACI;;CACT,CAAA;AAEZ;AAOA,IAAM,eAAeF,MAAM,YACxB,EAAE,WAAW,WAAW,kBAAkB,GAAG,SAAS,QACrD,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;CACE,aAAU;CACV,WAAWE,cAAAA,GAAG,iDAAiDM,+BAAAA,YAAY,QAAQ,gBAAgB;CAFrG,UAAA;EAIE,iBAAA,GAAA,kBAAA,IAAA,CAACC,aAAAA,QAAD,EAAQ,WAAWP,cAAAA,GAAG,8CAA8CM,+BAAAA,YAAY,MAAM,EAAI,CAAA;EAE1F,iBAAA,GAAA,kBAAA,IAAA,CAACP,KAAAA,QAAiB,OAAlB;GACO;GACL,WAAWC,cAAAA,GACT,sGACA,gFACA,8DACAM,+BAAAA,YAAY,QACZ,SACF;GACA,GAAI;GACJ,GAAIE,6CAAAA;EACL,CAAA;EACA,aACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAAK,aAAU;GAA2B,WAAU;GACjD,UAAA;EACE,CAAA;CAEJ;AAET,CAAA,CAAA;AACA,aAAa,cAAcT,KAAAA,QAAiB,MAAM;AASlD,IAAM,cAAcD,MAAM,YAEtB,EACE,WACA,UACA,aAAa,OACb,qBACA,6BACA,gBACA,GAAG,SAEL,QACG;CACH,MAAM,gBAAgBA,MAAM,WAAW,2BAA2B,MAAM;CACxE,MAAM,OACJ,iBAAA,GAAA,kBAAA,IAAA,CAACC,KAAAA,QAAiB,MAAlB;EACE,WAAWC,cAAAA,GACT,8DACA,aAAa,qBAAqB,oDAClC,iBAAiBA,cAAAA,GAAG,0BAAA,mFAA0C,GAC9D,SACF;EACA,GAAI;EACC;EAEJ;CACoB,CAAA;CAGzB,IAAI,CAAC,YAAY,OAAO;CAGxB,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACS,oBAAAA,YAAD;EAAY,WAAWT,cAAAA,GAAG,8BAA8B,mBAAmB;EAAG,MAAM;EAClF,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACU,oBAAAA,oBAAD;GAAoB,WAAW;GAA8B,UAAA;EAAyB,CAAA;CAC5E,CAAA;AAEhB,CACF;AACA,YAAY,cAAcX,KAAAA,QAAiB,KAAK;AAEhD,IAAM,eAAeD,MAAM,YAGxB,OAAO,QACR,iBAAA,GAAA,kBAAA,IAAA,CAACC,KAAAA,QAAiB,OAAlB;CAA6B;CAAK,WAAU;CAAsD,GAAI;AAAQ,CAAA,CAC/G;AACD,aAAa,cAAcA,KAAAA,QAAiB,MAAM;AAElD,IAAM,eAAeD,MAAM,YAGxB,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,IAAA,CAACC,KAAAA,QAAiB,OAAlB;CACO;CACL,WAAWC,cAAAA,GACT,6CACA,kJACA,yEACA,mJACA,SACF;CACA,GAAI;AACL,CAAA,CACF;AACD,aAAa,cAAcD,KAAAA,QAAiB,MAAM;AAElD,IAAM,mBAAmBD,MAAM,YAG5B,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,IAAA,CAACC,KAAAA,QAAiB,WAAlB;CAAiC;CAAK,WAAWC,cAAAA,GAAG,wBAAwB,SAAS;CAAG,GAAI;AAAQ,CAAA,CACrG;AACD,iBAAiB,cAAcD,KAAAA,QAAiB,UAAU;AAE1D,IAAM,cAAcD,MAAM,YAGvB,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,IAAA,CAACC,KAAAA,QAAiB,MAAlB;CACO;CACL,WAAWC,cAAAA,GACT,2HACA,8DAEA,qEACA,4EACA,+DACAW,gCAAAA,kBAEA,4GACA,SACF;CACA,GAAI;AACL,CAAA,CACF;AACD,YAAY,cAAcZ,KAAAA,QAAiB,KAAK;AAEhD,IAAM,mBAAmB,EAAE,WAAW,GAAG,YAAmD;CAC1F,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACa,YAAAA,KAAD;EACE,IAAG;EACH,SAAQ;EACR,MAAK;EACL,WAAWZ,cAAAA,GAAG,uCAAuC,SAAS;EAC9D,GAAI;CACL,CAAA;AAEL;AACA,gBAAgB,cAAc"}

package/dist/components/Command.es.js

@@ -94,7 +94,7 @@ var CommandInput = React$1.forwardRef(({ className, rightSlot, wrapperClassName,
 		/* @__PURE__ */ jsx(Search, { className: cn("mr-2 size-4 shrink-0 text-muted-foreground", transitions.colors) }),
 		/* @__PURE__ */ jsx(Command$1.Input, {
 			ref,
-			className: cn("flex h-8 min-w-0 flex-1 rounded-md bg-transparent py-2 text-body-sm text-foreground", "placeholder:text-placeholder disabled:cursor-not-allowed disabled:opacity-50", "outline-none focus:outline-none focus-visible:outline-none", transitions.colors, className),
+			className: cn("flex h-8 min-w-0 flex-1 rounded-md bg-transparent py-2 text-body-sm zoom-safe-text text-foreground", "placeholder:text-placeholder disabled:cursor-not-allowed disabled:opacity-50", "outline-none focus:outline-none focus-visible:outline-none", transitions.colors, className),
 			...props,
 			...passwordManagerOptOutProps
 		}),

package/dist/components/Command.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Command.es.js","names":["React","CommandPrimitive","_Fragment"],"sources":["../../src/ds/components/Command/command.tsx"],"sourcesContent":["import { Command as CommandPrimitive } from 'cmdk';\nimport { Search } from 'lucide-react';\nimport * as React from 'react';\n\nimport { Dialog, DialogContent, DialogDescription, DialogTitle } from '@/ds/components/Dialog';\nimport type { DialogSize } from '@/ds/components/Dialog';\nimport { ScrollArea, ScrollAreaViewport } from '@/ds/components/ScrollArea';\nimport type { ScrollAreaMask } from '@/ds/components/ScrollArea';\nimport { Txt } from '@/ds/components/Txt';\nimport { controlIconState } from '@/ds/primitives/control-icon';\nimport { passwordManagerOptOutProps } from '@/ds/primitives/password-manager-autofill';\nimport { heightTransition, transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nconst Command = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive\n    ref={ref}\n    className={cn(\n      'flex size-full flex-col overflow-hidden rounded-xl bg-card text-muted-foreground in-data-[slot=dialog-content]:bg-transparent',\n      className,\n    )}\n    {...props}\n  />\n));\nCommand.displayName = CommandPrimitive.displayName;\n\ntype CommandDialogVariant = 'default' | 'inset';\n\nconst commandDialogContentClasses: Record<CommandDialogVariant, string> = {\n  default: 'overflow-hidden py-0',\n  inset: 'overflow-hidden sm:top-1/4 sm:translate-y-0 rounded-[calc(var(--radius-xl)+--spacing(1))] bg-muted p-1',\n};\n\nconst commandDialogCommandClasses: Record<CommandDialogVariant, string> = {\n  default: cn(\n    '[&_[data-slot=command-input-wrapper]_svg]:size-5',\n    '**:[[cmdk-input]]:h-12',\n    '[&_[cmdk-item]_svg]:size-5',\n  ),\n  inset: cn(\n    'gap-1',\n    '[&_[data-slot=command-input-wrapper]_svg]:size-icon-md',\n    '**:[[cmdk-input]]:h-11 **:[[cmdk-input]]:text-label',\n    '[&_[cmdk-item]_svg]:size-icon-sm',\n    '**:[[cmdk-empty]]:px-4 **:[[cmdk-empty]]:pt-3 **:[[cmdk-empty]]:pb-1 **:[[cmdk-empty]]:text-left **:[[cmdk-empty]]:text-caption',\n  ),\n};\n\nconst commandDialogHeadingCase: Record<CommandDialogVariant, 'upper' | 'sentence'> = {\n  default: 'upper',\n  inset: 'sentence',\n};\n\nconst CommandDialogVariantContext = React.createContext<CommandDialogVariant>('default');\n\nconst CommandDialogBody = ({\n  variant,\n  footer,\n  children,\n}: {\n  variant: CommandDialogVariant;\n  footer?: React.ReactNode;\n  children?: React.ReactNode;\n}) => {\n  if (variant === 'default') return children;\n\n  return (\n    <>\n      <div\n        data-slot=\"command-dialog-panel\"\n        className=\"flex min-h-0 flex-1 flex-col overflow-hidden rounded-xl bg-background\"\n      >\n        {children}\n      </div>\n      {footer && (\n        <div data-slot=\"command-dialog-footer\" className=\"flex items-center justify-between gap-3 pr-1\">\n          {footer}\n        </div>\n      )}\n    </>\n  );\n};\n\ntype CommandDialogBaseProps = Omit<React.ComponentPropsWithoutRef<typeof Dialog>, 'children'> & {\n  children?: React.ReactNode;\n  title?: string;\n  description?: string;\n  size?: DialogSize;\n  contentClassName?: string;\n  commandClassName?: string;\n  commandLabel?: string;\n  showOverlay?: boolean;\n  overlayClassName?: string;\n};\n\ntype CommandDialogProps = CommandDialogBaseProps &\n  ({ variant?: 'default'; footer?: never } | { variant: 'inset'; footer?: React.ReactNode });\n\nconst CommandDialog = ({\n  children,\n  variant = 'default',\n  footer,\n  title = 'Command Palette',\n  description = 'Search for commands and actions',\n  size,\n  contentClassName,\n  commandClassName,\n  commandLabel,\n  showOverlay = false,\n  overlayClassName,\n  ...props\n}: CommandDialogProps) => {\n  const filter = React.useCallback((value: string, search: string) => {\n    const normalizedValue = value.toLowerCase();\n    const normalizedSearch = search.toLowerCase();\n    const searchTerms = normalizedSearch.split(/\\s+/).filter(Boolean);\n\n    const matches = searchTerms.every(term => normalizedValue.includes(term));\n    return matches ? 1 : 0;\n  }, []);\n\n  const handleKeyDown = React.useCallback((e: React.KeyboardEvent) => {\n    if (e.key === 'Escape') return;\n\n    e.stopPropagation();\n  }, []);\n\n  return (\n    <Dialog {...props}>\n      <DialogContent\n        size={size}\n        showOverlay={showOverlay}\n        showCloseButton={variant !== 'inset'}\n        overlayClassName={overlayClassName}\n        className={cn(commandDialogContentClasses[variant], contentClassName)}\n      >\n        <DialogTitle className=\"sr-only\">{title}</DialogTitle>\n        <DialogDescription className=\"sr-only\">{description}</DialogDescription>\n        <Command\n          label={commandLabel}\n          loop\n          filter={filter}\n          onKeyDown={handleKeyDown}\n          data-heading-case={commandDialogHeadingCase[variant]}\n          className={cn(\n            '**:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:text-column **:[[cmdk-group-heading]]:text-muted-foreground',\n            '[&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 **:[[cmdk-group]]:px-2',\n            '**:[[cmdk-item]]:p-2',\n            commandDialogCommandClasses[variant],\n            commandClassName,\n          )}\n        >\n          <CommandDialogVariantContext.Provider value={variant}>\n            <CommandDialogBody variant={variant} footer={footer}>\n              {children}\n            </CommandDialogBody>\n          </CommandDialogVariantContext.Provider>\n        </Command>\n      </DialogContent>\n    </Dialog>\n  );\n};\n\ntype CommandInputProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input> & {\n  rightSlot?: React.ReactNode;\n  wrapperClassName?: string;\n};\n\nconst CommandInput = React.forwardRef<React.ElementRef<typeof CommandPrimitive.Input>, CommandInputProps>(\n  ({ className, rightSlot, wrapperClassName, ...props }, ref) => (\n    <div\n      data-slot=\"command-input-wrapper\"\n      className={cn('flex items-center border-b border-border px-3', transitions.colors, wrapperClassName)}\n    >\n      <Search className={cn('mr-2 size-4 shrink-0 text-muted-foreground', transitions.colors)} />\n      {/* cmdk renders autocomplete=\"off\" itself; a command search is never a credential field. */}\n      <CommandPrimitive.Input\n        ref={ref}\n        className={cn(\n          'flex h-8 min-w-0 flex-1 rounded-md bg-transparent py-2 text-body-sm text-foreground',\n          'placeholder:text-placeholder disabled:cursor-not-allowed disabled:opacity-50',\n          'outline-none focus:outline-none focus-visible:outline-none',\n          transitions.colors,\n          className,\n        )}\n        {...props}\n        {...passwordManagerOptOutProps}\n      />\n      {rightSlot && (\n        <div data-slot=\"command-input-right-slot\" className=\"ml-2 flex shrink-0 items-center text-muted-foreground\">\n          {rightSlot}\n        </div>\n      )}\n    </div>\n  ),\n);\nCommandInput.displayName = CommandPrimitive.Input.displayName;\n\ntype CommandListProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.List> & {\n  scrollArea?: boolean;\n  scrollAreaClassName?: string;\n  scrollAreaViewportClassName?: string;\n  scrollAreaMask?: ScrollAreaMask;\n};\n\nconst CommandList = React.forwardRef<React.ElementRef<typeof CommandPrimitive.List>, CommandListProps>(\n  (\n    {\n      className,\n      children,\n      scrollArea = false,\n      scrollAreaClassName,\n      scrollAreaViewportClassName,\n      scrollAreaMask,\n      ...props\n    },\n    ref,\n  ) => {\n    const animateHeight = React.useContext(CommandDialogVariantContext) === 'inset';\n    const list = (\n      <CommandPrimitive.List\n        className={cn(\n          'outline-none focus:outline-none focus-visible:outline-none',\n          scrollArea ? 'overflow-visible' : 'max-h-dropdown overflow-x-hidden overflow-y-auto',\n          animateHeight && cn('h-(--cmdk-list-height)', heightTransition),\n          className,\n        )}\n        {...props}\n        ref={ref}\n      >\n        {children}\n      </CommandPrimitive.List>\n    );\n\n    if (!scrollArea) return list;\n\n    // The list fills Command's `rounded-xl` box, so its scrollbar takes that radius's inset.\n    return (\n      <ScrollArea className={cn('min-h-0 scrollbar-inset-xl', scrollAreaClassName)} mask={scrollAreaMask}>\n        <ScrollAreaViewport className={scrollAreaViewportClassName}>{list}</ScrollAreaViewport>\n      </ScrollArea>\n    );\n  },\n);\nCommandList.displayName = CommandPrimitive.List.displayName;\n\nconst CommandEmpty = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Empty>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>((props, ref) => (\n  <CommandPrimitive.Empty ref={ref} className=\"py-6 text-center text-body-sm text-muted-foreground\" {...props} />\n));\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName;\n\nconst CommandGroup = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Group>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Group\n    ref={ref}\n    className={cn(\n      'overflow-hidden p-1 text-muted-foreground',\n      '**:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:pt-1.5 **:[[cmdk-group-heading]]:pb-1 **:[[cmdk-group-heading]]:text-muted-foreground',\n      '[&_[cmdk-group-heading]]:text-meta [&_[cmdk-group-heading]]:uppercase',\n      'in-data-[heading-case=sentence]:**:[[cmdk-group-heading]]:tracking-normal in-data-[heading-case=sentence]:**:[[cmdk-group-heading]]:normal-case',\n      className,\n    )}\n    {...props}\n  />\n));\nCommandGroup.displayName = CommandPrimitive.Group.displayName;\n\nconst CommandSeparator = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Separator ref={ref} className={cn('-mx-1 h-px bg-border', className)} {...props} />\n));\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName;\n\nconst CommandItem = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Item\n    ref={ref}\n    className={cn(\n      'relative flex cursor-pointer items-center gap-2.5 rounded-lg px-2 py-1.5 text-body-sm text-muted-foreground select-none',\n      'outline-none focus:outline-none focus-visible:outline-none',\n      // cmdk's selection follows both the pointer and the arrow keys; the row paints it instantly.\n      'data-[selected=true]:bg-fill data-[selected=true]:text-foreground',\n      'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',\n      '[&_svg]:pointer-events-none [&>svg]:size-4 [&>svg]:shrink-0',\n      controlIconState,\n      // A selected row brightens its icon with its label, like a highlighted menu row.\n      '[--control-icon-hover:var(--foreground)] data-[selected=true]:[--control-icon:var(--control-icon-hover)]',\n      className,\n    )}\n    {...props}\n  />\n));\nCommandItem.displayName = CommandPrimitive.Item.displayName;\n\nconst CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <Txt\n      as=\"span\"\n      variant=\"meta\"\n      tone=\"muted\"\n      className={cn('ml-auto tracking-wider tabular-nums', className)}\n      {...props}\n    />\n  );\n};\nCommandShortcut.displayName = 'CommandShortcut';\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandSeparator,\n  CommandShortcut,\n};\n"],"mappings":"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"}
+{"version":3,"file":"Command.es.js","names":["React","CommandPrimitive","_Fragment"],"sources":["../../src/ds/components/Command/command.tsx"],"sourcesContent":["import { Command as CommandPrimitive } from 'cmdk';\nimport { Search } from 'lucide-react';\nimport * as React from 'react';\n\nimport { Dialog, DialogContent, DialogDescription, DialogTitle } from '@/ds/components/Dialog';\nimport type { DialogSize } from '@/ds/components/Dialog';\nimport { ScrollArea, ScrollAreaViewport } from '@/ds/components/ScrollArea';\nimport type { ScrollAreaMask } from '@/ds/components/ScrollArea';\nimport { Txt } from '@/ds/components/Txt';\nimport { controlIconState } from '@/ds/primitives/control-icon';\nimport { passwordManagerOptOutProps } from '@/ds/primitives/password-manager-autofill';\nimport { heightTransition, transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nconst Command = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive\n    ref={ref}\n    className={cn(\n      'flex size-full flex-col overflow-hidden rounded-xl bg-card text-muted-foreground in-data-[slot=dialog-content]:bg-transparent',\n      className,\n    )}\n    {...props}\n  />\n));\nCommand.displayName = CommandPrimitive.displayName;\n\ntype CommandDialogVariant = 'default' | 'inset';\n\nconst commandDialogContentClasses: Record<CommandDialogVariant, string> = {\n  default: 'overflow-hidden py-0',\n  inset: 'overflow-hidden sm:top-1/4 sm:translate-y-0 rounded-[calc(var(--radius-xl)+--spacing(1))] bg-muted p-1',\n};\n\nconst commandDialogCommandClasses: Record<CommandDialogVariant, string> = {\n  default: cn(\n    '[&_[data-slot=command-input-wrapper]_svg]:size-5',\n    '**:[[cmdk-input]]:h-12',\n    '[&_[cmdk-item]_svg]:size-5',\n  ),\n  inset: cn(\n    'gap-1',\n    '[&_[data-slot=command-input-wrapper]_svg]:size-icon-md',\n    '**:[[cmdk-input]]:h-11 **:[[cmdk-input]]:text-label',\n    '[&_[cmdk-item]_svg]:size-icon-sm',\n    '**:[[cmdk-empty]]:px-4 **:[[cmdk-empty]]:pt-3 **:[[cmdk-empty]]:pb-1 **:[[cmdk-empty]]:text-left **:[[cmdk-empty]]:text-caption',\n  ),\n};\n\nconst commandDialogHeadingCase: Record<CommandDialogVariant, 'upper' | 'sentence'> = {\n  default: 'upper',\n  inset: 'sentence',\n};\n\nconst CommandDialogVariantContext = React.createContext<CommandDialogVariant>('default');\n\nconst CommandDialogBody = ({\n  variant,\n  footer,\n  children,\n}: {\n  variant: CommandDialogVariant;\n  footer?: React.ReactNode;\n  children?: React.ReactNode;\n}) => {\n  if (variant === 'default') return children;\n\n  return (\n    <>\n      <div\n        data-slot=\"command-dialog-panel\"\n        className=\"flex min-h-0 flex-1 flex-col overflow-hidden rounded-xl bg-background\"\n      >\n        {children}\n      </div>\n      {footer && (\n        <div data-slot=\"command-dialog-footer\" className=\"flex items-center justify-between gap-3 pr-1\">\n          {footer}\n        </div>\n      )}\n    </>\n  );\n};\n\ntype CommandDialogBaseProps = Omit<React.ComponentPropsWithoutRef<typeof Dialog>, 'children'> & {\n  children?: React.ReactNode;\n  title?: string;\n  description?: string;\n  size?: DialogSize;\n  contentClassName?: string;\n  commandClassName?: string;\n  commandLabel?: string;\n  showOverlay?: boolean;\n  overlayClassName?: string;\n};\n\ntype CommandDialogProps = CommandDialogBaseProps &\n  ({ variant?: 'default'; footer?: never } | { variant: 'inset'; footer?: React.ReactNode });\n\nconst CommandDialog = ({\n  children,\n  variant = 'default',\n  footer,\n  title = 'Command Palette',\n  description = 'Search for commands and actions',\n  size,\n  contentClassName,\n  commandClassName,\n  commandLabel,\n  showOverlay = false,\n  overlayClassName,\n  ...props\n}: CommandDialogProps) => {\n  const filter = React.useCallback((value: string, search: string) => {\n    const normalizedValue = value.toLowerCase();\n    const normalizedSearch = search.toLowerCase();\n    const searchTerms = normalizedSearch.split(/\\s+/).filter(Boolean);\n\n    const matches = searchTerms.every(term => normalizedValue.includes(term));\n    return matches ? 1 : 0;\n  }, []);\n\n  const handleKeyDown = React.useCallback((e: React.KeyboardEvent) => {\n    if (e.key === 'Escape') return;\n\n    e.stopPropagation();\n  }, []);\n\n  return (\n    <Dialog {...props}>\n      <DialogContent\n        size={size}\n        showOverlay={showOverlay}\n        showCloseButton={variant !== 'inset'}\n        overlayClassName={overlayClassName}\n        className={cn(commandDialogContentClasses[variant], contentClassName)}\n      >\n        <DialogTitle className=\"sr-only\">{title}</DialogTitle>\n        <DialogDescription className=\"sr-only\">{description}</DialogDescription>\n        <Command\n          label={commandLabel}\n          loop\n          filter={filter}\n          onKeyDown={handleKeyDown}\n          data-heading-case={commandDialogHeadingCase[variant]}\n          className={cn(\n            '**:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:text-column **:[[cmdk-group-heading]]:text-muted-foreground',\n            '[&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 **:[[cmdk-group]]:px-2',\n            '**:[[cmdk-item]]:p-2',\n            commandDialogCommandClasses[variant],\n            commandClassName,\n          )}\n        >\n          <CommandDialogVariantContext.Provider value={variant}>\n            <CommandDialogBody variant={variant} footer={footer}>\n              {children}\n            </CommandDialogBody>\n          </CommandDialogVariantContext.Provider>\n        </Command>\n      </DialogContent>\n    </Dialog>\n  );\n};\n\ntype CommandInputProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input> & {\n  rightSlot?: React.ReactNode;\n  wrapperClassName?: string;\n};\n\nconst CommandInput = React.forwardRef<React.ElementRef<typeof CommandPrimitive.Input>, CommandInputProps>(\n  ({ className, rightSlot, wrapperClassName, ...props }, ref) => (\n    <div\n      data-slot=\"command-input-wrapper\"\n      className={cn('flex items-center border-b border-border px-3', transitions.colors, wrapperClassName)}\n    >\n      <Search className={cn('mr-2 size-4 shrink-0 text-muted-foreground', transitions.colors)} />\n      {/* cmdk renders autocomplete=\"off\" itself; a command search is never a credential field. */}\n      <CommandPrimitive.Input\n        ref={ref}\n        className={cn(\n          'flex h-8 min-w-0 flex-1 rounded-md bg-transparent py-2 text-body-sm zoom-safe-text text-foreground',\n          'placeholder:text-placeholder disabled:cursor-not-allowed disabled:opacity-50',\n          'outline-none focus:outline-none focus-visible:outline-none',\n          transitions.colors,\n          className,\n        )}\n        {...props}\n        {...passwordManagerOptOutProps}\n      />\n      {rightSlot && (\n        <div data-slot=\"command-input-right-slot\" className=\"ml-2 flex shrink-0 items-center text-muted-foreground\">\n          {rightSlot}\n        </div>\n      )}\n    </div>\n  ),\n);\nCommandInput.displayName = CommandPrimitive.Input.displayName;\n\ntype CommandListProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.List> & {\n  scrollArea?: boolean;\n  scrollAreaClassName?: string;\n  scrollAreaViewportClassName?: string;\n  scrollAreaMask?: ScrollAreaMask;\n};\n\nconst CommandList = React.forwardRef<React.ElementRef<typeof CommandPrimitive.List>, CommandListProps>(\n  (\n    {\n      className,\n      children,\n      scrollArea = false,\n      scrollAreaClassName,\n      scrollAreaViewportClassName,\n      scrollAreaMask,\n      ...props\n    },\n    ref,\n  ) => {\n    const animateHeight = React.useContext(CommandDialogVariantContext) === 'inset';\n    const list = (\n      <CommandPrimitive.List\n        className={cn(\n          'outline-none focus:outline-none focus-visible:outline-none',\n          scrollArea ? 'overflow-visible' : 'max-h-dropdown overflow-x-hidden overflow-y-auto',\n          animateHeight && cn('h-(--cmdk-list-height)', heightTransition),\n          className,\n        )}\n        {...props}\n        ref={ref}\n      >\n        {children}\n      </CommandPrimitive.List>\n    );\n\n    if (!scrollArea) return list;\n\n    // The list fills Command's `rounded-xl` box, so its scrollbar takes that radius's inset.\n    return (\n      <ScrollArea className={cn('min-h-0 scrollbar-inset-xl', scrollAreaClassName)} mask={scrollAreaMask}>\n        <ScrollAreaViewport className={scrollAreaViewportClassName}>{list}</ScrollAreaViewport>\n      </ScrollArea>\n    );\n  },\n);\nCommandList.displayName = CommandPrimitive.List.displayName;\n\nconst CommandEmpty = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Empty>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>((props, ref) => (\n  <CommandPrimitive.Empty ref={ref} className=\"py-6 text-center text-body-sm text-muted-foreground\" {...props} />\n));\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName;\n\nconst CommandGroup = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Group>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Group\n    ref={ref}\n    className={cn(\n      'overflow-hidden p-1 text-muted-foreground',\n      '**:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:pt-1.5 **:[[cmdk-group-heading]]:pb-1 **:[[cmdk-group-heading]]:text-muted-foreground',\n      '[&_[cmdk-group-heading]]:text-meta [&_[cmdk-group-heading]]:uppercase',\n      'in-data-[heading-case=sentence]:**:[[cmdk-group-heading]]:tracking-normal in-data-[heading-case=sentence]:**:[[cmdk-group-heading]]:normal-case',\n      className,\n    )}\n    {...props}\n  />\n));\nCommandGroup.displayName = CommandPrimitive.Group.displayName;\n\nconst CommandSeparator = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Separator ref={ref} className={cn('-mx-1 h-px bg-border', className)} {...props} />\n));\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName;\n\nconst CommandItem = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Item\n    ref={ref}\n    className={cn(\n      'relative flex cursor-pointer items-center gap-2.5 rounded-lg px-2 py-1.5 text-body-sm text-muted-foreground select-none',\n      'outline-none focus:outline-none focus-visible:outline-none',\n      // cmdk's selection follows both the pointer and the arrow keys; the row paints it instantly.\n      'data-[selected=true]:bg-fill data-[selected=true]:text-foreground',\n      'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',\n      '[&_svg]:pointer-events-none [&>svg]:size-4 [&>svg]:shrink-0',\n      controlIconState,\n      // A selected row brightens its icon with its label, like a highlighted menu row.\n      '[--control-icon-hover:var(--foreground)] data-[selected=true]:[--control-icon:var(--control-icon-hover)]',\n      className,\n    )}\n    {...props}\n  />\n));\nCommandItem.displayName = CommandPrimitive.Item.displayName;\n\nconst CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <Txt\n      as=\"span\"\n      variant=\"meta\"\n      tone=\"muted\"\n      className={cn('ml-auto tracking-wider tabular-nums', className)}\n      {...props}\n    />\n  );\n};\nCommandShortcut.displayName = 'CommandShortcut';\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandSeparator,\n  CommandShortcut,\n};\n"],"mappings":"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"}

package/dist/components/Comment.cjs.js

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_Comment = require("../Comment-rQxuMDQv.cjs");
+const require_Comment = require("../Comment-A07IvOt2.cjs");
 exports.Comment = require_Comment.Comment;
 exports.CommentArrival = require_Comment.CommentArrival;
 exports.CommentComposer = require_Comment.CommentComposer;

package/dist/components/Comment.es.js

@@ -1 +1 @@
-export { s as Comment, o as CommentArrival, r as CommentComposer, i as CommentComposerInput, a as CommentComposerSend, n as CommentEditor, c as CommentItem, l as CommentItemActions, u as CommentItemAuthor, d as CommentItemAvatar, f as CommentItemBody, p as CommentItemContent, m as CommentItemHeader, h as CommentItemTimestamp, g as CommentList, t as CommentQuote } from "../Comment-2q9SomE2.js";
+export { s as Comment, o as CommentArrival, r as CommentComposer, i as CommentComposerInput, a as CommentComposerSend, n as CommentEditor, c as CommentItem, l as CommentItemActions, u as CommentItemAuthor, d as CommentItemAvatar, f as CommentItemBody, p as CommentItemContent, m as CommentItemHeader, h as CommentItemTimestamp, g as CommentList, t as CommentQuote } from "../Comment-D_gSx7oM.js";

package/dist/components/Composer.cjs.js

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_Composer = require("../Composer-u1K6edoZ.cjs");
+const require_Composer = require("../Composer-D2BqRyb5.cjs");
 exports.Composer = require_Composer.Composer;
 exports.ComposerActions = require_Composer.ComposerActions;
 exports.ComposerAttachments = require_Composer.ComposerAttachments;

package/dist/components/Composer.es.js

@@ -1 +1 @@
-export { l as Composer, u as ComposerActions, d as ComposerAttachments, f as ComposerBox, a as ComposerHeader, o as ComposerHeaderActions, s as ComposerHeaderContent, c as ComposerHeaderRow, p as ComposerInput, m as ComposerRing, i as ComposerSuggestions, h as ComposerToneLabel, n as matchCommandOptions, r as matchCommands, t as useComposerCommands } from "../Composer-bVE8qK52.js";
+export { l as Composer, u as ComposerActions, d as ComposerAttachments, f as ComposerBox, a as ComposerHeader, o as ComposerHeaderActions, s as ComposerHeaderContent, c as ComposerHeaderRow, p as ComposerInput, m as ComposerRing, i as ComposerSuggestions, h as ComposerToneLabel, n as matchCommandOptions, r as matchCommands, t as useComposerCommands } from "../Composer-kjwmlIgL.js";

package/dist/components/DataCodeSection.cjs.js

@@ -1,3 +1,3 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_DataCodeSection = require("../DataCodeSection-7SvRJj6f.cjs");
+const require_DataCodeSection = require("../DataCodeSection-JPGTWLcL.cjs");
 exports.DataCodeSection = require_DataCodeSection.DataCodeSection;

package/dist/components/DataCodeSection.es.js

@@ -1 +1 @@
-export { t as DataCodeSection } from "../DataCodeSection-CTodi9wg.js";
+export { t as DataCodeSection } from "../DataCodeSection-CcX8Z68Y.js";

package/dist/components/DataDetailsPanel.cjs.js

@@ -1,3 +1,3 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_DataDetailsPanel = require("../DataDetailsPanel-BDoD6pxx.cjs");
+const require_DataDetailsPanel = require("../DataDetailsPanel-DCMlaG7j.cjs");
 exports.DataDetailsPanel = require_DataDetailsPanel.DataDetailsPanel;

package/dist/components/DataDetailsPanel.es.js

@@ -1 +1 @@
-export { t as DataDetailsPanel } from "../DataDetailsPanel-BU05psHL.js";
+export { t as DataDetailsPanel } from "../DataDetailsPanel-mTfbbQho.js";

package/dist/components/DataList.cjs.js

@@ -1,7 +1,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_data_list = require("../data-list-072hHK9L.cjs");
 const require_DataList = require("../DataList-DTIdllb-.cjs");
-const require_tabbed_container = require("../tabbed-container-Bhfi-DWr.cjs");
+const require_tabbed_container = require("../tabbed-container-BMLD6mvc.cjs");
 const require_use_data_list_keyboard = require("../use-data-list-keyboard-BCLBdaWR.cjs");
 exports.DataList = require_data_list.DataList;
 exports.DataListSkeleton = require_DataList.DataListSkeleton;

package/dist/components/DataList.es.js

@@ -1,5 +1,5 @@
 import { t as DataList } from "../data-list-GzbzPmYR.js";
 import { i as DataListSkeletonRows, n as ScoresDataList, r as DataListSkeleton, t as TracesDataList } from "../DataList-B7ho6PrJ.js";
-import { t as TabbedContainer } from "../tabbed-container-DOkHshha.js";
+import { t as TabbedContainer } from "../tabbed-container-CaS8cZCS.js";
 import { t as useDataListKeyboard } from "../use-data-list-keyboard-fJXq2T3y.js";
 export { DataList, DataListSkeleton, DataListSkeletonRows, ScoresDataList, TabbedContainer, TracesDataList, useDataListKeyboard };

package/dist/components/DataPanel.cjs.js

@@ -1,3 +1,3 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_DataPanel = require("../DataPanel-BRRAvWYQ.cjs");
+const require_DataPanel = require("../DataPanel-LfExjFpP.cjs");
 exports.DataPanel = require_DataPanel.DataPanel;

package/dist/components/DataPanel.es.js

@@ -1 +1 @@
-export { t as DataPanel } from "../DataPanel-pVr5LVaK.js";
+export { t as DataPanel } from "../DataPanel-Rv5Mb_pf.js";

package/dist/components/DateTimePicker.cjs.js

@@ -3,7 +3,7 @@ const require_rolldown_runtime = require("../rolldown-runtime-CmQyd0Gu.cjs");
 const require_utils = require("../utils-uDc1ofX1.cjs");
 const require_Button = require("../Button-BfICfyxD.cjs");
 const require_components_Field = require("./Field.cjs.js");
-const require_input = require("../input-BpnUsQSt.cjs");
+const require_input = require("../input-D_V0m95F.cjs");
 const require_popover = require("../popover-D9AfJmla.cjs");
 const require_primitives_control_size = require("../primitives/control-size.cjs.js");
 require("../primitives/form-element.cjs.js");

package/dist/components/DateTimePicker.es.js

@@ -1,7 +1,7 @@
 import { t as cn } from "../utils-DQx8TpNT.js";
 import { t as Button } from "../Button-Bi7aXd_G.js";
 import { Field, FieldError, FieldLabel } from "./Field.es.js";
-import { t as Input } from "../input-Cyit5ZSc.js";
+import { t as Input } from "../input-BNykbvOz.js";
 import { i as PopoverTrigger, n as Popover, r as PopoverContent } from "../popover-BpMi52Tb.js";
 import { controlTriggerOpenStateFor } from "../primitives/control-size.es.js";
 import "../primitives/form-element.es.js";

package/dist/components/DateTimeRangePicker.cjs.js

@@ -1,3 +1,3 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_date_time_range_picker = require("../date-time-range-picker-Bq-8IPtS.cjs");
+const require_date_time_range_picker = require("../date-time-range-picker-Dhnuwa-U.cjs");
 exports.DateTimeRangePicker = require_date_time_range_picker.DateTimeRangePicker;

package/dist/components/DateTimeRangePicker.es.js

@@ -1 +1 @@
-export { t as DateTimeRangePicker } from "../date-time-range-picker-DdNgKD87.js";
+export { t as DateTimeRangePicker } from "../date-time-range-picker-CJyhcug7.js";

package/dist/components/DropdownMenu.cjs.js

@@ -1,3 +1,3 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_dropdown_menu = require("../dropdown-menu-Dx-jCOIv.cjs");
+const require_dropdown_menu = require("../dropdown-menu-D3D8USIY.cjs");
 exports.DropdownMenu = require_dropdown_menu.DropdownMenu;

package/dist/components/DropdownMenu.es.js

@@ -1 +1 @@
-export { t as DropdownMenu } from "../dropdown-menu-DKoWI8kD.js";
+export { t as DropdownMenu } from "../dropdown-menu-jsf9D-J_.js";

package/dist/components/EnvironmentVariablesEditor.cjs.js

@@ -7,7 +7,7 @@ const require_Txt = require("../Txt-_00wWxTd.cjs");
 const require_data_list = require("../data-list-072hHK9L.cjs");
 const require_hooks_use_copy_to_clipboard = require("../hooks/use-copy-to-clipboard.cjs.js");
 const require_components_Field = require("./Field.cjs.js");
-const require_input_group = require("../input-group-DBCilXjT.cjs");
+const require_input_group = require("../input-group-Da8HBo30.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let lucide_react = require("lucide-react");

package/dist/components/EnvironmentVariablesEditor.es.js

@@ -6,7 +6,7 @@ import { t as Txt } from "../Txt-5efBsb2p.js";
 import { t as DataList } from "../data-list-GzbzPmYR.js";
 import { useCopyToClipboard } from "../hooks/use-copy-to-clipboard.es.js";
 import { Field, FieldError, FieldLabel } from "./Field.es.js";
-import { i as InputGroupInput, n as InputGroupAddon, r as InputGroupButton, t as InputGroup } from "../input-group-NV4ZzKOk.js";
+import { i as InputGroupInput, n as InputGroupAddon, r as InputGroupButton, t as InputGroup } from "../input-group-CCSyY4J5.js";
 import { createContext, use, useMemo, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { CheckIcon, Code2Icon, CopyIcon, EyeIcon, EyeOffIcon, PlusIcon, TrashIcon, UploadIcon } from "lucide-react";

package/dist/components/FilterBar.cjs.js

@@ -1,8 +1,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_types = require("../types-CP7wbYua.cjs");
-const require_filter_bar_chip = require("../filter-bar-chip-DFsbUZ-V.cjs");
-const require_filter_bar_time_range = require("../filter-bar-time-range-DlVNjw43.cjs");
-const require_FilterBar = require("../FilterBar-jBz6yaNu.cjs");
+const require_filter_bar_chip = require("../filter-bar-chip-q2Zr-cnY.cjs");
+const require_filter_bar_time_range = require("../filter-bar-time-range-D4C3kU0J.cjs");
+const require_FilterBar = require("../FilterBar-O8SYau_Q.cjs");
 exports.DEFAULT_FILTER_OPERATORS = require_FilterBar.DEFAULT_FILTER_OPERATORS;
 exports.FILTER_BAR_TIME_RANGE_FIELD = require_filter_bar_time_range.FILTER_BAR_TIME_RANGE_FIELD;
 exports.FILTER_BAR_TIME_RANGE_FIELD_ID = require_filter_bar_time_range.FILTER_BAR_TIME_RANGE_FIELD_ID;