@langchain/macaw-components 1.0.0-beta.1 → 1.0.0-beta.7

package/dist/components/Typeahead/TypeaheadView.js.map

@@ -1 +1 @@
-{"version":3,"file":"TypeaheadView.js","names":[],"sources":["../../../src/components/Typeahead/TypeaheadView.tsx"],"sourcesContent":["/* eslint-disable max-lines -- Keep the control, tag layout, and popover rendering together in this view. */\nimport type {\n  FocusEvent,\n  HTMLAttributes,\n  KeyboardEvent,\n  ReactNode,\n  Ref,\n} from 'react';\nimport { useRef } from 'react';\n\nimport { Command as CommandPrimitive } from 'cmdk';\n\nimport { MagnifyingGlassIcon } from '@phosphor-icons/react/dist/ssr/MagnifyingGlass';\n\nimport { CaretDownIcon } from '../../icons/PaddedPhosphorIcons';\nimport { cn } from '../../utils/cn';\nimport { CONTROL_SIZES } from '../../utils/componentSizes';\nimport { CONTROL_ICON_SIZES } from '../../utils/controlIconSizes';\nimport { Command, CommandEmpty, CommandItem, CommandList } from '../Command';\nimport { Icon } from '../Icon';\nimport { Popover, PopoverAnchor, PopoverContent } from '../Popover';\nimport { Text } from '../Text';\nimport type {\n  TypeaheadListItem,\n  TypeaheadMultipleValue,\n  TypeaheadRenderOptionState,\n  TypeaheadSelectedValue,\n  TypeaheadSize,\n  TypeaheadTagProps,\n} from './Typeahead.types';\nimport { isTypeaheadOption } from './Typeahead.utils';\nimport {\n  TypeaheadClearButton,\n  TypeaheadCreateOption,\n  TypeaheadDefaultOption,\n  TypeaheadDefaultTag,\n} from './TypeaheadParts';\n\ninterface TypeaheadViewRootProps {\n  ref: Ref<HTMLDivElement>;\n  props: HTMLAttributes<HTMLDivElement>;\n  handleBlur: (event: FocusEvent<HTMLDivElement>) => void;\n  dataTestId?: string;\n  className?: string;\n}\n\ninterface TypeaheadViewState {\n  size: TypeaheadSize;\n  disabled: boolean;\n  isError: boolean;\n  multiple?: boolean;\n  open: boolean;\n  setOpen: (open: boolean) => void;\n}\n\ninterface TypeaheadViewIds {\n  commandLabel: string;\n  resolvedInputId: string;\n  listId: string;\n  selectedSummaryId: string;\n  inputAriaLabel?: string;\n}\n\ninterface TypeaheadViewInputProps {\n  value: string;\n  onValueChange: (value: string) => void;\n  onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;\n  placeholder: string;\n  leftDecorator?: ReactNode;\n  showPlaceholderWithValues: boolean;\n  autoFocus?: boolean;\n  autoComplete?: string;\n  setNode: (node: HTMLInputElement | null) => void;\n  focus: () => void;\n}\n\ninterface TypeaheadViewSelectionProps<TOption> {\n  selectedValues: TypeaheadMultipleValue<TOption>;\n  selectedKeys: Set<string>;\n  getTagProps: (params: { index: number }) => TypeaheadTagProps;\n  renderTags?: (\n    value: TypeaheadMultipleValue<TOption>,\n    getTagProps: (params: { index: number }) => TypeaheadTagProps\n  ) => ReactNode;\n  getLabel: (option: TypeaheadSelectedValue<TOption>) => string;\n  getValue: (option: TypeaheadSelectedValue<TOption>) => string;\n  showClearButton: boolean;\n  clearValue: () => void;\n  forcePopupIcon: boolean;\n  selectedSummary?: string;\n}\n\ninterface TypeaheadViewListProps<TOption> {\n  ref: Ref<HTMLDivElement>;\n  items: TypeaheadListItem<TOption>[];\n  emptyText: string;\n  emptyState?: ReactNode;\n  listFooter?: ReactNode;\n  hideEmptyList: boolean;\n  optionIsDisabled: (item: TypeaheadListItem<TOption>) => boolean;\n  selectValue: (selected: TypeaheadSelectedValue<TOption>) => void;\n  renderOption?: (\n    option: TOption,\n    state: TypeaheadRenderOptionState\n  ) => ReactNode;\n}\n\ninterface TypeaheadViewCreateOptionProps {\n  show: boolean;\n  inputValue: string;\n  label?: ReactNode;\n  onCreate: () => void;\n}\n\ninterface TypeaheadViewProps<TOption> {\n  root: TypeaheadViewRootProps;\n  state: TypeaheadViewState;\n  ids: TypeaheadViewIds;\n  input: TypeaheadViewInputProps;\n  selection: TypeaheadViewSelectionProps<TOption>;\n  list: TypeaheadViewListProps<TOption>;\n  createOption: TypeaheadViewCreateOptionProps;\n  popoverContentRef: Ref<HTMLDivElement>;\n}\n\nconst CONTROL_RADIUS_CLASSES = {\n  xs: 'rounded-xs',\n  sm: 'rounded-sm',\n  md: 'rounded-md',\n  lg: 'rounded-md',\n} as const satisfies Record<TypeaheadSize, string>;\n\nconst MULTIPLE_INPUT_HEIGHT_CLASSES = {\n  xs: 'h-4',\n  sm: 'h-5',\n  md: 'h-6',\n  lg: 'h-6',\n} as const satisfies Record<TypeaheadSize, string>;\n\nconst INPUT_TEXT_CLASSES = {\n  xs: 'text-xxs leading-[1.15]',\n  sm: 'text-xs leading-normal',\n  md: 'text-sm leading-normal',\n  lg: 'text-sm leading-normal',\n} as const satisfies Record<TypeaheadSize, string>;\n\nexport function TypeaheadView<TOption>({\n  root,\n  state,\n  ids,\n  input,\n  selection,\n  list,\n  createOption,\n  popoverContentRef,\n}: TypeaheadViewProps<TOption>) {\n  const controlRef = useRef<HTMLDivElement | null>(null);\n  const preventInputDismiss = (event: Event) => {\n    if (\n      open &&\n      event.target instanceof HTMLInputElement &&\n      event.target.getAttribute('role') === 'combobox' &&\n      controlRef.current?.contains(event.target)\n    ) {\n      event.preventDefault();\n    }\n  };\n  const { ref: rootRef, handleBlur, dataTestId, className } = root;\n  const { size, disabled, isError, multiple, open, setOpen } = state;\n  const {\n    commandLabel,\n    resolvedInputId,\n    listId,\n    selectedSummaryId,\n    inputAriaLabel,\n  } = ids;\n  const {\n    value: inputValue,\n    onValueChange: handleInputValueChange,\n    onKeyDown: handleKeyDown,\n    placeholder,\n    leftDecorator,\n    showPlaceholderWithValues,\n    autoFocus,\n    autoComplete,\n    setNode: setInputNode,\n    focus: focusInput,\n  } = input;\n  const {\n    selectedValues,\n    selectedKeys,\n    getTagProps,\n    renderTags,\n    getLabel,\n    getValue,\n    showClearButton,\n    clearValue,\n    forcePopupIcon,\n    selectedSummary,\n  } = selection;\n  const {\n    ref: listRef,\n    items,\n    emptyText,\n    emptyState,\n    listFooter,\n    hideEmptyList,\n    optionIsDisabled,\n    selectValue,\n    renderOption,\n  } = list;\n  const hasValue = selectedValues.length > 0;\n  const visibleItems = open ? items : [];\n  const visibleShowCreateOption = open && createOption.show;\n  const showEmptyState =\n    open &&\n    visibleItems.length === 0 &&\n    !visibleShowCreateOption &&\n    (emptyState != null || !hideEmptyList);\n  const controlHeightClass = multiple\n    ? CONTROL_SIZES[size].minHeightClassName\n    : CONTROL_SIZES[size].heightClassName;\n  const controlPaddingClass =\n    size === 'xs' || size === 'sm' ? 'px-space-2' : 'px-space-3';\n  const renderedTags =\n    multiple &&\n    (renderTags\n      ? renderTags(selectedValues, getTagProps)\n      : selectedValues.map((selected, index) => {\n          const tagProps = getTagProps({ index });\n          return (\n            <TypeaheadDefaultTag\n              key={`${getValue(selected)}-${index}`}\n              selected={selected}\n              index={index}\n              disabled={disabled}\n              size={size}\n              getLabel={getLabel}\n              getValue={getValue}\n              onRemove={tagProps.onDelete}\n            />\n          );\n        }));\n  const inputField = (\n    <div\n      className={cn(\n        'flex items-center gap-space-2',\n        multiple ? 'min-w-0 flex-1' : 'flex-1',\n        !multiple && (size === 'xs' ? 'min-w-12' : 'min-w-16')\n      )}\n    >\n      {leftDecorator != null ? (\n        <div className=\"flex min-w-0 shrink items-center text-icon-tertiary\">\n          {leftDecorator}\n        </div>\n      ) : !multiple && !hasValue ? (\n        <Icon\n          aria-hidden\n          icon={MagnifyingGlassIcon}\n          iconClassName={CONTROL_ICON_SIZES[size].iconClassName}\n          className=\"text-icon-tertiary\"\n          weight=\"regular\"\n        />\n      ) : null}\n      {/*\n        cmdk rewrites some of these combobox attributes as the query changes, so\n        useTypeaheadDomSync re-asserts them imperatively. Keep the two attribute\n        sets in sync when editing either here or in that hook.\n      */}\n      <CommandPrimitive.Input\n        ref={setInputNode}\n        id={resolvedInputId}\n        value={inputValue}\n        onValueChange={handleInputValueChange}\n        onFocus={() => {\n          if (!disabled) {\n            setOpen(true);\n          }\n        }}\n        onKeyDown={handleKeyDown}\n        placeholder={\n          hasValue && multiple && !showPlaceholderWithValues\n            ? undefined\n            : placeholder\n        }\n        disabled={disabled}\n        autoFocus={autoFocus}\n        autoComplete={autoComplete}\n        role=\"combobox\"\n        aria-expanded={open}\n        aria-controls={listId}\n        aria-autocomplete=\"list\"\n        aria-haspopup=\"listbox\"\n        aria-invalid={isError || undefined}\n        aria-describedby={multiple ? selectedSummaryId : undefined}\n        aria-label={inputAriaLabel}\n        className={cn(\n          'min-w-0 max-w-full border-none bg-transparent p-0 outline-none placeholder:text-placeholder',\n          INPUT_TEXT_CLASSES[size],\n          disabled && 'cursor-not-allowed',\n          multiple\n            ? cn(MULTIPLE_INPUT_HEIGHT_CLASSES[size], 'w-full')\n            : 'h-full w-full flex-1'\n        )}\n      />\n    </div>\n  );\n  const actionControls = (\n    <div\n      className={cn(\n        'flex shrink-0 items-center gap-space-1 text-icon-tertiary',\n        multiple ? 'self-center' : 'ml-auto'\n      )}\n      style={{\n        marginInlineEnd:\n          showClearButton && !forcePopupIcon\n            ? CONTROL_ICON_SIZES[size].actionOffset\n            : undefined,\n      }}\n    >\n      {showClearButton && (\n        <TypeaheadClearButton\n          size={size}\n          label={multiple ? 'Clear selections' : 'Clear selection'}\n          onClick={(event) => {\n            event.stopPropagation();\n            clearValue();\n          }}\n        />\n      )}\n      {forcePopupIcon && (\n        <Icon\n          aria-hidden\n          icon={CaretDownIcon}\n          iconClassName={CONTROL_ICON_SIZES[size].iconClassName}\n          className={cn(\n            'text-icon-tertiary transition-transform',\n            open && 'rotate-180'\n          )}\n          weight=\"regular\"\n        />\n      )}\n    </div>\n  );\n\n  return (\n    <Command\n      ref={rootRef}\n      shouldFilter={false}\n      label={commandLabel}\n      className=\"overflow-visible bg-transparent\"\n    >\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverAnchor asChild>\n          <div\n            ref={controlRef}\n            {...root.props}\n            data-testid={dataTestId}\n            onBlur={handleBlur}\n            className={cn(\n              'w-full cursor-text border border-default bg-elevated text-primary transition-colors',\n              multiple\n                ? 'flex flex-wrap items-center gap-space-1'\n                : 'flex items-center gap-space-1 overflow-hidden',\n              'focus-within:border-focus focus-within:bg-elevated hover:bg-elevated-hover',\n              controlHeightClass,\n              multiple && {\n                'px-space-1 py-0': size === 'xs',\n                'px-space-1 py-px': size === 'sm',\n                'px-space-2 py-0.5': size === 'md',\n                'px-space-3 py-space-1': size === 'lg',\n              },\n              !multiple && controlPaddingClass,\n              CONTROL_RADIUS_CLASSES[size],\n              isError && 'border-error focus-within:border-error',\n              disabled &&\n                'cursor-not-allowed border-disabled bg-disabled text-disabled opacity-70',\n              className\n            )}\n            onClick={(event) => {\n              root.props.onClick?.(event);\n              if (!disabled) {\n                focusInput();\n                setOpen(true);\n              }\n            }}\n          >\n            {multiple ? (\n              <>\n                {renderedTags}\n                <div className=\"flex min-w-16 flex-1 items-center gap-space-1\">\n                  {inputField}\n                  {actionControls}\n                </div>\n              </>\n            ) : (\n              <>\n                {inputField}\n                {actionControls}\n              </>\n            )}\n          </div>\n        </PopoverAnchor>\n\n        {multiple && (\n          <span\n            id={selectedSummaryId}\n            className=\"sr-only\"\n            aria-live=\"polite\"\n            aria-atomic=\"true\"\n          >\n            {selectedSummary}\n          </span>\n        )}\n\n        <PopoverContent\n          ref={popoverContentRef}\n          hidden={!open}\n          className={cn(\n            'w-[var(--radix-popover-trigger-width)] min-w-48 max-w-[calc(100vw-1rem)] bg-elevated p-space-1 text-primary',\n            !open && 'hidden'\n          )}\n          align=\"start\"\n          sideOffset={4}\n          forceMount\n          onOpenAutoFocus={(event) => event.preventDefault()}\n          onCloseAutoFocus={(event) => event.preventDefault()}\n          onFocusOutside={preventInputDismiss}\n          onInteractOutside={preventInputDismiss}\n        >\n          <CommandList\n            ref={listRef}\n            id={listId}\n            aria-label={`${commandLabel} options`}\n            aria-multiselectable={multiple ? true : undefined}\n            className=\"max-h-[18.75rem]\"\n          >\n            {showEmptyState && (\n              <CommandEmpty>\n                {emptyState ?? (\n                  <Text variant=\"sm\" color=\"secondary\">\n                    {emptyText}\n                  </Text>\n                )}\n              </CommandEmpty>\n            )}\n\n            {visibleItems.map((item) => {\n              const { option } = item;\n              const optionKey = getValue(option);\n              const optionLabel = getLabel(option);\n              const selected = selectedKeys.has(optionKey);\n              const optionDisabled = optionIsDisabled(item);\n              const optionState = {\n                selected,\n                disabled: optionDisabled,\n                inputValue,\n              };\n\n              return (\n                <CommandItem\n                  key={optionKey}\n                  value={optionKey}\n                  disabled={optionDisabled}\n                  keywords={\n                    isTypeaheadOption(option)\n                      ? [optionLabel, ...(option.keywords ?? [])]\n                      : [optionLabel]\n                  }\n                  onSelect={() => selectValue(option)}\n                  aria-checked={multiple ? selected : undefined}\n                  className={cn(\n                    'flex items-center gap-space-2 rounded-sm px-space-2 py-space-2 text-sm text-primary hover:bg-surface-level-2 aria-selected:bg-surface-level-2',\n                    optionDisabled && 'text-disabled'\n                  )}\n                >\n                  {renderOption && item.source === 'option' ? (\n                    renderOption(option as TOption, optionState)\n                  ) : (\n                    <TypeaheadDefaultOption\n                      option={option}\n                      state={optionState}\n                      getLabel={getLabel}\n                    />\n                  )}\n                </CommandItem>\n              );\n            })}\n\n            {visibleShowCreateOption && (\n              <CommandItem\n                value={`__typeahead_create__${createOption.inputValue}`}\n                keywords={[createOption.inputValue]}\n                onSelect={createOption.onCreate}\n                aria-label={\n                  createOption.inputValue\n                    ? `Add ${createOption.inputValue}`\n                    : 'Add new'\n                }\n                className=\"flex items-center gap-space-2 rounded-sm p-space-2 text-sm text-primary hover:bg-surface-level-2 aria-selected:bg-surface-level-2\"\n              >\n                <TypeaheadCreateOption\n                  inputValue={createOption.inputValue}\n                  label={createOption.label}\n                />\n              </CommandItem>\n            )}\n\n            {listFooter}\n          </CommandList>\n        </PopoverContent>\n      </Popover>\n    </Command>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;AA6HA,IAAM,yBAAyB;CAC7B,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAM,gCAAgC;CACpC,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAM,qBAAqB;CACzB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,SAAgB,cAAuB,EACrC,MACA,OACA,KACA,OACA,WACA,MACA,cACA,qBAC8B;CAC9B,MAAM,aAAa,OAA8B,IAAI;CACrD,MAAM,uBAAuB,UAAiB;EAC5C,IACE,QACA,MAAM,kBAAkB,oBACxB,MAAM,OAAO,aAAa,MAAM,MAAM,cACtC,WAAW,SAAS,SAAS,MAAM,MAAM,GAEzC,MAAM,eAAe;CAEzB;CACA,MAAM,EAAE,KAAK,SAAS,YAAY,YAAY,cAAc;CAC5D,MAAM,EAAE,MAAM,UAAU,SAAS,UAAU,MAAM,YAAY;CAC7D,MAAM,EACJ,cACA,iBACA,QACA,mBACA,mBACE;CACJ,MAAM,EACJ,OAAO,YACP,eAAe,wBACf,WAAW,eACX,aACA,eACA,2BACA,WACA,cACA,SAAS,cACT,OAAO,eACL;CACJ,MAAM,EACJ,gBACA,cACA,aACA,YACA,UACA,UACA,iBACA,YACA,gBACA,oBACE;CACJ,MAAM,EACJ,KAAK,SACL,OACA,WACA,YACA,YACA,eACA,kBACA,aACA,iBACE;CACJ,MAAM,WAAW,eAAe,SAAS;CACzC,MAAM,eAAe,OAAO,QAAQ,CAAC;CACrC,MAAM,0BAA0B,QAAQ,aAAa;CACrD,MAAM,iBACJ,QACA,aAAa,WAAW,KACxB,CAAC,4BACA,cAAc,QAAQ,CAAC;CAC1B,MAAM,qBAAqB,WACvB,cAAc,KAAK,CAAC,qBACpB,cAAc,KAAK,CAAC;CACxB,MAAM,sBACJ,SAAS,QAAQ,SAAS,OAAO,eAAe;CAClD,MAAM,eACJ,aACC,aACG,WAAW,gBAAgB,WAAW,IACtC,eAAe,KAAK,UAAU,UAAU;EACtC,MAAM,WAAW,YAAY,EAAE,MAAM,CAAC;EACtC,OACE,oBAAC,qBAAD;GAEY;GACH;GACG;GACJ;GACI;GACA;GACV,UAAU,SAAS;EACpB,GARM,GAAG,SAAS,QAAQ,EAAE,GAAG,OAQ/B;CAEL,CAAC;CACP,MAAM,aACJ,qBAAC,OAAD;EACE,WAAW,GACT,iCACA,WAAW,mBAAmB,UAC9B,CAAC,aAAa,SAAS,OAAO,aAAa,WAC7C;EALF,UAAA,CAOG,iBAAiB,OAChB,oBAAC,OAAD;GAAK,WAAU;GACZ,UAAA;EACE,CAAA,IACH,CAAC,YAAY,CAAC,WAChB,oBAAC,MAAD;GACE,eAAA;GACA,MAAM;GACN,eAAe,mBAAmB,KAAK,CAAC;GACxC,WAAU;GACV,QAAO;EACR,CAAA,IACC,MAMJ,oBAAC,QAAiB,OAAlB;GACE,KAAK;GACL,IAAI;GACJ,OAAO;GACP,eAAe;GACf,eAAe;IACb,IAAI,CAAC,UACH,QAAQ,IAAI;GAEhB;GACA,WAAW;GACX,aACE,YAAY,YAAY,CAAC,4BACrB,KAAA,IACA;GAEI;GACC;GACG;GACd,MAAK;GACL,iBAAe;GACf,iBAAe;GACf,qBAAkB;GAClB,iBAAc;GACd,gBAAc,WAAW,KAAA;GACzB,oBAAkB,WAAW,oBAAoB,KAAA;GACjD,cAAY;GACZ,WAAW,GACT,+FACA,mBAAmB,OACnB,YAAY,sBACZ,WACI,GAAG,8BAA8B,OAAO,QAAQ,IAChD,sBACN;EACD,CAAA,CACE;;CAEP,MAAM,iBACJ,qBAAC,OAAD;EACE,WAAW,GACT,6DACA,WAAW,gBAAgB,SAC7B;EACA,OAAO,EACL,iBACE,mBAAmB,CAAC,iBAChB,mBAAmB,KAAK,CAAC,eACzB,KAAA,EACR;EAVF,UAAA,CAYG,mBACC,oBAAC,sBAAD;GACQ;GACN,OAAO,WAAW,qBAAqB;GACvC,UAAU,UAAU;IAClB,MAAM,gBAAgB;IACtB,WAAW;GACb;EACD,CAAA,GAEF,kBACC,oBAAC,MAAD;GACE,eAAA;GACA,MAAM;GACN,eAAe,mBAAmB,KAAK,CAAC;GACxC,WAAW,GACT,2CACA,QAAQ,YACV;GACA,QAAO;EACR,CAAA,CAEA;;CAGP,OACE,oBAAC,WAAD;EACE,KAAK;EACL,cAAc;EACd,OAAO;EACP,WAAU;EAEV,UAAA,qBAAC,SAAD;GAAe;GAAM,cAAc;GAAnC,UAAA;IACE,oBAAC,eAAD;KAAe,SAAA;KACb,UAAA,oBAAC,OAAD;MACE,KAAK;MACL,GAAI,KAAK;MACT,eAAa;MACb,QAAQ;MACR,WAAW,GACT,uFACA,WACI,4CACA,iDACJ,8EACA,oBACA,YAAY;OACV,mBAAmB,SAAS;OAC5B,oBAAoB,SAAS;OAC7B,qBAAqB,SAAS;OAC9B,yBAAyB,SAAS;MACpC,GACA,CAAC,YAAY,qBACb,uBAAuB,OACvB,WAAW,0CACX,YACE,2EACF,SACF;MACA,UAAU,UAAU;OAClB,KAAK,MAAM,UAAU,KAAK;OAC1B,IAAI,CAAC,UAAU;QACb,WAAW;QACX,QAAQ,IAAI;OACd;MACF;MAEC,UAAA,WACC,qBAAA,YAAA,EAAA,UAAA,CACG,cACD,qBAAC,OAAD;OAAK,WAAU;OAAf,UAAA,CACG,YACA,cACE;MACL,CAAA,CAAA,EAAA,CAAA,IAEF,qBAAA,YAAA,EAAA,UAAA,CACG,YACA,cACD,EAAA,CAAA;KAED,CAAA;IACQ,CAAA;IAEd,YACC,oBAAC,QAAD;KACE,IAAI;KACJ,WAAU;KACV,aAAU;KACV,eAAY;KAEX,UAAA;IACG,CAAA;IAGR,oBAAC,gBAAD;KACE,KAAK;KACL,QAAQ,CAAC;KACT,WAAW,GACT,+GACA,CAAC,QAAQ,QACX;KACA,OAAM;KACN,YAAY;KACZ,YAAA;KACA,kBAAkB,UAAU,MAAM,eAAe;KACjD,mBAAmB,UAAU,MAAM,eAAe;KAClD,gBAAgB;KAChB,mBAAmB;KAEnB,UAAA,qBAAC,aAAD;MACE,KAAK;MACL,IAAI;MACJ,cAAY,GAAG,aAAa;MAC5B,wBAAsB,WAAW,OAAO,KAAA;MACxC,WAAU;MALZ,UAAA;OAOG,kBACC,oBAAC,cAAD,EAAA,UACG,cACC,oBAAC,MAAD;QAAM,SAAQ;QAAK,OAAM;QACtB,UAAA;OACG,CAAA,EAEI,CAAA;OAGf,aAAa,KAAK,SAAS;QAC1B,MAAM,EAAE,WAAW;QACnB,MAAM,YAAY,SAAS,MAAM;QACjC,MAAM,cAAc,SAAS,MAAM;QACnC,MAAM,WAAW,aAAa,IAAI,SAAS;QAC3C,MAAM,iBAAiB,iBAAiB,IAAI;QAC5C,MAAM,cAAc;SAClB;SACA,UAAU;SACV;QACF;QAEA,OACE,oBAAC,aAAD;SAEE,OAAO;SACP,UAAU;SACV,UACE,kBAAkB,MAAM,IACpB,CAAC,aAAa,GAAI,OAAO,YAAY,CAAC,CAAE,IACxC,CAAC,WAAW;SAElB,gBAAgB,YAAY,MAAM;SAClC,gBAAc,WAAW,WAAW,KAAA;SACpC,WAAW,GACT,iJACA,kBAAkB,eACpB;SAEC,UAAA,gBAAgB,KAAK,WAAW,WAC/B,aAAa,QAAmB,WAAW,IAE3C,oBAAC,wBAAD;UACU;UACR,OAAO;UACG;SACX,CAAA;QAEQ,GAxBN,SAwBM;OAEjB,CAAC;OAEA,2BACC,oBAAC,aAAD;QACE,OAAO,uBAAuB,aAAa;QAC3C,UAAU,CAAC,aAAa,UAAU;QAClC,UAAU,aAAa;QACvB,cACE,aAAa,aACT,OAAO,aAAa,eACpB;QAEN,WAAU;QAEV,UAAA,oBAAC,uBAAD;SACE,YAAY,aAAa;SACzB,OAAO,aAAa;QACrB,CAAA;OACU,CAAA;OAGd;MACU;;IACC,CAAA;GACT;;CACF,CAAA;AAEb"}
+{"version":3,"file":"TypeaheadView.js","names":[],"sources":["../../../src/components/Typeahead/TypeaheadView.tsx"],"sourcesContent":["/* eslint-disable max-lines -- Keep the control, tag layout, and popover rendering together in this view. */\nimport type {\n  FocusEvent,\n  HTMLAttributes,\n  KeyboardEvent,\n  ReactNode,\n  Ref,\n} from 'react';\nimport { useRef } from 'react';\n\nimport { Command as CommandPrimitive } from 'cmdk';\n\nimport { MagnifyingGlassIcon } from '@phosphor-icons/react/dist/ssr/MagnifyingGlass';\n\nimport { CaretDownIcon } from '../../icons/PaddedPhosphorIcons';\nimport { cn } from '../../utils/cn';\nimport { CONTROL_SIZES, type OptionRowSize } from '../../utils/componentSizes';\nimport { CONTROL_ICON_SIZES } from '../../utils/controlIconSizes';\nimport { Command, CommandEmpty, CommandItem, CommandList } from '../Command';\nimport { Icon } from '../Icon';\nimport { Popover, PopoverAnchor, PopoverContent } from '../Popover';\nimport { Text } from '../Text';\nimport type {\n  TypeaheadListItem,\n  TypeaheadMultipleValue,\n  TypeaheadRenderOptionState,\n  TypeaheadSelectedValue,\n  TypeaheadSize,\n  TypeaheadTagProps,\n} from './Typeahead.types';\nimport { isTypeaheadOption } from './Typeahead.utils';\nimport {\n  TypeaheadClearButton,\n  TypeaheadCreateOption,\n  TypeaheadDefaultOption,\n  TypeaheadDefaultTag,\n} from './TypeaheadParts';\n\ninterface TypeaheadViewRootProps {\n  ref: Ref<HTMLDivElement>;\n  props: HTMLAttributes<HTMLDivElement>;\n  handleBlur: (event: FocusEvent<HTMLDivElement>) => void;\n  dataTestId?: string;\n  className?: string;\n}\n\ninterface TypeaheadViewState {\n  size: TypeaheadSize;\n  disabled: boolean;\n  isError: boolean;\n  multiple?: boolean;\n  open: boolean;\n  setOpen: (open: boolean) => void;\n}\n\ninterface TypeaheadViewIds {\n  commandLabel: string;\n  resolvedInputId: string;\n  listId: string;\n  selectedSummaryId: string;\n  inputAriaLabel?: string;\n}\n\ninterface TypeaheadViewInputProps {\n  value: string;\n  onValueChange: (value: string) => void;\n  onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;\n  placeholder: string;\n  leftDecorator?: ReactNode;\n  showPlaceholderWithValues: boolean;\n  autoFocus?: boolean;\n  autoComplete?: string;\n  setNode: (node: HTMLInputElement | null) => void;\n  focus: () => void;\n}\n\ninterface TypeaheadViewSelectionProps<TOption> {\n  selectedValues: TypeaheadMultipleValue<TOption>;\n  selectedKeys: Set<string>;\n  getTagProps: (params: { index: number }) => TypeaheadTagProps;\n  renderTags?: (\n    value: TypeaheadMultipleValue<TOption>,\n    getTagProps: (params: { index: number }) => TypeaheadTagProps\n  ) => ReactNode;\n  getLabel: (option: TypeaheadSelectedValue<TOption>) => string;\n  getValue: (option: TypeaheadSelectedValue<TOption>) => string;\n  showClearButton: boolean;\n  clearValue: () => void;\n  forcePopupIcon: boolean;\n  selectedSummary?: string;\n}\n\ninterface TypeaheadViewListProps<TOption> {\n  ref: Ref<HTMLDivElement>;\n  items: TypeaheadListItem<TOption>[];\n  emptyText: string;\n  emptyState?: ReactNode;\n  listFooter?: ReactNode;\n  hideEmptyList: boolean;\n  optionIsDisabled: (item: TypeaheadListItem<TOption>) => boolean;\n  selectValue: (selected: TypeaheadSelectedValue<TOption>) => void;\n  renderOption?: (\n    option: TOption,\n    state: TypeaheadRenderOptionState\n  ) => ReactNode;\n}\n\ninterface TypeaheadViewCreateOptionProps {\n  show: boolean;\n  inputValue: string;\n  label?: ReactNode;\n  onCreate: () => void;\n}\n\ninterface TypeaheadViewProps<TOption> {\n  root: TypeaheadViewRootProps;\n  state: TypeaheadViewState;\n  ids: TypeaheadViewIds;\n  input: TypeaheadViewInputProps;\n  selection: TypeaheadViewSelectionProps<TOption>;\n  list: TypeaheadViewListProps<TOption>;\n  createOption: TypeaheadViewCreateOptionProps;\n  popoverContentRef: Ref<HTMLDivElement>;\n}\n\nconst CONTROL_RADIUS_CLASSES = {\n  xs: 'rounded-xs',\n  sm: 'rounded-sm',\n  md: 'rounded-md',\n  lg: 'rounded-md',\n} as const satisfies Record<TypeaheadSize, string>;\n\nconst MULTIPLE_INPUT_HEIGHT_CLASSES = {\n  xs: 'h-4',\n  sm: 'h-5',\n  md: 'h-6',\n  lg: 'h-6',\n} as const satisfies Record<TypeaheadSize, string>;\n\nconst INPUT_TEXT_CLASSES = {\n  xs: 'text-xxs leading-[1.15]',\n  sm: 'text-xs leading-normal',\n  md: 'text-sm leading-normal',\n  lg: 'text-sm leading-normal',\n} as const satisfies Record<TypeaheadSize, string>;\n\nexport function TypeaheadView<TOption>({\n  root,\n  state,\n  ids,\n  input,\n  selection,\n  list,\n  createOption,\n  popoverContentRef,\n}: TypeaheadViewProps<TOption>) {\n  const controlRef = useRef<HTMLDivElement | null>(null);\n  const preventInputDismiss = (event: Event) => {\n    if (\n      open &&\n      event.target instanceof HTMLInputElement &&\n      event.target.getAttribute('role') === 'combobox' &&\n      controlRef.current?.contains(event.target)\n    ) {\n      event.preventDefault();\n    }\n  };\n  // Escape inside the input must close this typeahead before ancestor layers\n  // react to it; document-level capture listeners would otherwise dismiss the\n  // enclosing dialog first.\n  const handleEscapeKeyDown = (event: globalThis.KeyboardEvent) => {\n    if (!open) return;\n    event.preventDefault();\n    setOpen(false);\n  };\n  const { ref: rootRef, handleBlur, dataTestId, className } = root;\n  const { size, disabled, isError, multiple, open, setOpen } = state;\n  const {\n    commandLabel,\n    resolvedInputId,\n    listId,\n    selectedSummaryId,\n    inputAriaLabel,\n  } = ids;\n  const {\n    value: inputValue,\n    onValueChange: handleInputValueChange,\n    onKeyDown: handleKeyDown,\n    placeholder,\n    leftDecorator,\n    showPlaceholderWithValues,\n    autoFocus,\n    autoComplete,\n    setNode: setInputNode,\n    focus: focusInput,\n  } = input;\n  const {\n    selectedValues,\n    selectedKeys,\n    getTagProps,\n    renderTags,\n    getLabel,\n    getValue,\n    showClearButton,\n    clearValue,\n    forcePopupIcon,\n    selectedSummary,\n  } = selection;\n  const {\n    ref: listRef,\n    items,\n    emptyText,\n    emptyState,\n    listFooter,\n    hideEmptyList,\n    optionIsDisabled,\n    selectValue,\n    renderOption,\n  } = list;\n  const hasValue = selectedValues.length > 0;\n  const showEmptyState =\n    items.length === 0 &&\n    !createOption.show &&\n    (emptyState != null || !hideEmptyList);\n  const controlHeightClass = multiple\n    ? CONTROL_SIZES[size].minHeightClassName\n    : CONTROL_SIZES[size].heightClassName;\n  const controlPaddingClass =\n    size === 'xs' || size === 'sm' ? 'px-space-2' : 'px-space-3';\n  const itemRowSize: OptionRowSize =\n    size === 'xs' || size === 'sm' ? 'sm' : 'md';\n  const renderedTags =\n    multiple &&\n    (renderTags\n      ? renderTags(selectedValues, getTagProps)\n      : selectedValues.map((selected, index) => {\n          const tagProps = getTagProps({ index });\n          return (\n            <TypeaheadDefaultTag\n              key={`${getValue(selected)}-${index}`}\n              selected={selected}\n              index={index}\n              disabled={disabled}\n              size={size}\n              getLabel={getLabel}\n              getValue={getValue}\n              onRemove={tagProps.onDelete}\n            />\n          );\n        }));\n  const inputField = (\n    <div\n      className={cn(\n        'flex items-center gap-space-2',\n        multiple ? 'min-w-0 flex-1' : 'flex-1',\n        !multiple && (size === 'xs' ? 'min-w-12' : 'min-w-16')\n      )}\n    >\n      {leftDecorator != null ? (\n        <div className=\"flex min-w-0 shrink items-center text-icon-tertiary\">\n          {leftDecorator}\n        </div>\n      ) : !multiple && !hasValue ? (\n        <Icon\n          aria-hidden\n          icon={MagnifyingGlassIcon}\n          iconClassName={CONTROL_ICON_SIZES[size].iconClassName}\n          className=\"text-icon-tertiary\"\n          weight=\"regular\"\n        />\n      ) : null}\n      {/*\n        cmdk rewrites some of these combobox attributes as the query changes, so\n        useTypeaheadDomSync re-asserts them imperatively. Keep the two attribute\n        sets in sync when editing either here or in that hook.\n      */}\n      <CommandPrimitive.Input\n        ref={setInputNode}\n        id={resolvedInputId}\n        value={inputValue}\n        onValueChange={handleInputValueChange}\n        onFocus={() => {\n          if (!disabled) {\n            setOpen(true);\n          }\n        }}\n        onKeyDown={handleKeyDown}\n        placeholder={\n          hasValue && multiple && !showPlaceholderWithValues\n            ? undefined\n            : placeholder\n        }\n        disabled={disabled}\n        autoFocus={autoFocus}\n        autoComplete={autoComplete}\n        role=\"combobox\"\n        aria-expanded={open}\n        aria-controls={listId}\n        aria-autocomplete=\"list\"\n        aria-haspopup=\"listbox\"\n        aria-invalid={isError || undefined}\n        aria-describedby={multiple ? selectedSummaryId : undefined}\n        aria-label={inputAriaLabel}\n        className={cn(\n          'min-w-0 max-w-full border-none bg-transparent p-0 outline-none placeholder:text-placeholder',\n          INPUT_TEXT_CLASSES[size],\n          disabled && 'cursor-not-allowed',\n          multiple\n            ? cn(MULTIPLE_INPUT_HEIGHT_CLASSES[size], 'w-full')\n            : 'h-full w-full flex-1'\n        )}\n      />\n    </div>\n  );\n  const actionControls = (\n    <div\n      className={cn(\n        'flex shrink-0 items-center gap-space-1 text-icon-tertiary',\n        multiple ? 'self-center' : 'ml-auto'\n      )}\n      style={{\n        marginInlineEnd:\n          showClearButton && !forcePopupIcon\n            ? CONTROL_ICON_SIZES[size].actionOffset\n            : undefined,\n      }}\n    >\n      {showClearButton && (\n        <TypeaheadClearButton\n          size={size}\n          label={multiple ? 'Clear selections' : 'Clear selection'}\n          onClick={(event) => {\n            event.stopPropagation();\n            clearValue();\n          }}\n        />\n      )}\n      {forcePopupIcon && (\n        <Icon\n          aria-hidden\n          icon={CaretDownIcon}\n          iconClassName={CONTROL_ICON_SIZES[size].iconClassName}\n          className={cn(\n            'text-icon-tertiary transition-transform',\n            open && 'rotate-180'\n          )}\n          weight=\"regular\"\n        />\n      )}\n    </div>\n  );\n\n  return (\n    <Command\n      ref={rootRef}\n      shouldFilter={false}\n      label={commandLabel}\n      className=\"overflow-visible bg-transparent\"\n    >\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverAnchor asChild>\n          <div\n            ref={controlRef}\n            {...root.props}\n            data-testid={dataTestId}\n            onBlur={handleBlur}\n            className={cn(\n              'w-full cursor-text border border-default bg-elevated text-primary transition-colors',\n              multiple\n                ? 'flex flex-wrap items-center gap-space-1'\n                : 'flex items-center gap-space-1 overflow-hidden',\n              'focus-within:border-focus focus-within:bg-elevated hover:bg-elevated-hover',\n              controlHeightClass,\n              multiple && {\n                'px-space-1 py-0': size === 'xs',\n                'px-space-1 py-px': size === 'sm',\n                'px-space-2 py-0.5': size === 'md',\n                'px-space-3 py-space-1': size === 'lg',\n              },\n              !multiple && controlPaddingClass,\n              CONTROL_RADIUS_CLASSES[size],\n              isError && 'border-error focus-within:border-error',\n              disabled &&\n                'cursor-not-allowed border-disabled bg-disabled text-disabled opacity-70',\n              className\n            )}\n            onClick={(event) => {\n              root.props.onClick?.(event);\n              if (!disabled) {\n                focusInput();\n                setOpen(true);\n              }\n            }}\n          >\n            {multiple ? (\n              <>\n                {renderedTags}\n                <div className=\"flex min-w-16 flex-1 items-center gap-space-1\">\n                  {inputField}\n                  {actionControls}\n                </div>\n              </>\n            ) : (\n              <>\n                {inputField}\n                {actionControls}\n              </>\n            )}\n          </div>\n        </PopoverAnchor>\n\n        {multiple && (\n          <span\n            id={selectedSummaryId}\n            className=\"sr-only\"\n            aria-live=\"polite\"\n            aria-atomic=\"true\"\n          >\n            {selectedSummary}\n          </span>\n        )}\n\n        <PopoverContent\n          ref={popoverContentRef}\n          className=\"w-[var(--radix-popover-trigger-width)] min-w-48 max-w-[calc(100vw-1rem)] bg-elevated p-space-1 text-primary\"\n          align=\"start\"\n          sideOffset={4}\n          onEscapeKeyDown={handleEscapeKeyDown}\n          onOpenAutoFocus={(event) => event.preventDefault()}\n          onCloseAutoFocus={(event) => event.preventDefault()}\n          onFocusOutside={preventInputDismiss}\n          onInteractOutside={preventInputDismiss}\n        >\n          <CommandList\n            ref={listRef}\n            id={listId}\n            aria-label={`${commandLabel} options`}\n            aria-multiselectable={multiple ? true : undefined}\n            className=\"max-h-[18.75rem]\"\n          >\n            {showEmptyState && (\n              <CommandEmpty>\n                {emptyState ?? (\n                  <Text variant=\"sm\" color=\"secondary\">\n                    {emptyText}\n                  </Text>\n                )}\n              </CommandEmpty>\n            )}\n\n            {items.map((item) => {\n              const { option } = item;\n              const optionKey = getValue(option);\n              const optionLabel = getLabel(option);\n              const selected = selectedKeys.has(optionKey);\n              const optionDisabled = optionIsDisabled(item);\n              const optionState = {\n                selected,\n                disabled: optionDisabled,\n                inputValue,\n              };\n\n              return (\n                <CommandItem\n                  key={optionKey}\n                  value={optionKey}\n                  disabled={optionDisabled}\n                  keywords={\n                    isTypeaheadOption(option)\n                      ? [optionLabel, ...(option.keywords ?? [])]\n                      : [optionLabel]\n                  }\n                  onSelect={() => selectValue(option)}\n                  aria-checked={multiple ? selected : undefined}\n                  size={itemRowSize}\n                  className={cn(\n                    'flex items-center gap-space-2 text-primary hover:bg-surface-level-2 aria-selected:bg-surface-level-2',\n                    optionDisabled && 'text-disabled'\n                  )}\n                >\n                  {renderOption && item.source === 'option' ? (\n                    renderOption(option as TOption, optionState)\n                  ) : (\n                    <TypeaheadDefaultOption\n                      option={option}\n                      state={optionState}\n                      getLabel={getLabel}\n                      size={itemRowSize}\n                    />\n                  )}\n                </CommandItem>\n              );\n            })}\n\n            {createOption.show && (\n              <CommandItem\n                value={`__typeahead_create__${createOption.inputValue}`}\n                keywords={[createOption.inputValue]}\n                onSelect={createOption.onCreate}\n                size={itemRowSize}\n                aria-label={\n                  createOption.inputValue\n                    ? `Add ${createOption.inputValue}`\n                    : 'Add new'\n                }\n                className=\"flex items-center gap-space-2 text-primary hover:bg-surface-level-2 aria-selected:bg-surface-level-2\"\n              >\n                <TypeaheadCreateOption\n                  inputValue={createOption.inputValue}\n                  label={createOption.label}\n                />\n              </CommandItem>\n            )}\n\n            {listFooter}\n          </CommandList>\n        </PopoverContent>\n      </Popover>\n    </Command>\n  );\n}\n"],"mappings":"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"}

package/dist/components/Typeahead/useTypeaheadDomSync.d.ts

@@ -12,4 +12,4 @@ export declare function useTypeaheadDomSync({ autoComplete, commandLabel, inputA
     open: boolean;
     resolvedInputId: string;
     selectedSummaryId: string;
-}): void;
+}): (list: HTMLDivElement | null) => void;

package/dist/components/Typeahead/useTypeaheadDomSync.js

@@ -1,9 +1,20 @@
-import { useEffect } from "react";
+import { useCallback, useEffect } from "react";
 //#region packages/components/src/components/Typeahead/useTypeaheadDomSync.ts
 function useTypeaheadDomSync({ autoComplete, commandLabel, inputAriaLabel, inputRef, inputValue, isError, listId, listRef, multiple, open, resolvedInputId, selectedSummaryId }) {
+	const setListNode = useCallback((list) => {
+		listRef.current = list;
+		list?.setAttribute("id", listId);
+		list?.setAttribute("aria-label", `${commandLabel} options`);
+		if (multiple) list?.setAttribute("aria-multiselectable", "true");
+		else list?.removeAttribute("aria-multiselectable");
+	}, [
+		commandLabel,
+		listId,
+		listRef,
+		multiple
+	]);
 	useEffect(() => {
 		const input = inputRef.current;
-		const list = listRef.current;
 		input?.setAttribute("id", resolvedInputId);
 		input?.setAttribute("aria-controls", listId);
 		input?.setAttribute("aria-expanded", String(open));
@@ -18,24 +29,19 @@ function useTypeaheadDomSync({ autoComplete, commandLabel, inputAriaLabel, input
 		else input?.removeAttribute("aria-invalid");
 		if (multiple) input?.setAttribute("aria-describedby", selectedSummaryId);
 		else input?.removeAttribute("aria-describedby");
-		list?.setAttribute("id", listId);
-		list?.setAttribute("aria-label", `${commandLabel} options`);
-		if (multiple) list?.setAttribute("aria-multiselectable", "true");
-		else list?.removeAttribute("aria-multiselectable");
 	}, [
 		autoComplete,
-		commandLabel,
 		inputAriaLabel,
 		inputRef,
 		inputValue,
 		isError,
 		listId,
-		listRef,
 		multiple,
 		open,
 		resolvedInputId,
 		selectedSummaryId
 	]);
+	return setListNode;
 }
 //#endregion
 export { useTypeaheadDomSync };

package/dist/components/Typeahead/useTypeaheadDomSync.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTypeaheadDomSync.js","names":[],"sources":["../../../src/components/Typeahead/useTypeaheadDomSync.ts"],"sourcesContent":["import type { RefObject } from 'react';\nimport { useEffect } from 'react';\n\nexport function useTypeaheadDomSync({\n  autoComplete,\n  commandLabel,\n  inputAriaLabel,\n  inputRef,\n  inputValue,\n  isError,\n  listId,\n  listRef,\n  multiple,\n  open,\n  resolvedInputId,\n  selectedSummaryId,\n}: {\n  autoComplete?: string;\n  commandLabel: string;\n  inputAriaLabel?: string;\n  inputRef: RefObject<HTMLInputElement | null>;\n  inputValue: string;\n  isError: boolean;\n  listId: string;\n  listRef: RefObject<HTMLDivElement | null>;\n  multiple?: boolean;\n  open: boolean;\n  resolvedInputId: string;\n  selectedSummaryId: string;\n}) {\n  useEffect(() => {\n    // cmdk owns these DOM nodes and may rewrite combobox attributes as input changes.\n    const input = inputRef.current;\n    const list = listRef.current;\n\n    input?.setAttribute('id', resolvedInputId);\n    input?.setAttribute('aria-controls', listId);\n    input?.setAttribute('aria-expanded', String(open));\n    input?.setAttribute('aria-haspopup', 'listbox');\n    input?.setAttribute('autocomplete', autoComplete ?? 'off');\n    if (inputAriaLabel) {\n      input?.setAttribute('aria-label', inputAriaLabel);\n    } else {\n      input?.removeAttribute('aria-label');\n      input?.removeAttribute('aria-labelledby');\n    }\n    if (isError) {\n      input?.setAttribute('aria-invalid', 'true');\n    } else {\n      input?.removeAttribute('aria-invalid');\n    }\n    if (multiple) {\n      input?.setAttribute('aria-describedby', selectedSummaryId);\n    } else {\n      input?.removeAttribute('aria-describedby');\n    }\n\n    list?.setAttribute('id', listId);\n    list?.setAttribute('aria-label', `${commandLabel} options`);\n    if (multiple) {\n      list?.setAttribute('aria-multiselectable', 'true');\n    } else {\n      list?.removeAttribute('aria-multiselectable');\n    }\n  }, [\n    autoComplete,\n    commandLabel,\n    inputAriaLabel,\n    inputRef,\n    inputValue,\n    isError,\n    listId,\n    listRef,\n    multiple,\n    open,\n    resolvedInputId,\n    selectedSummaryId,\n  ]);\n}\n"],"mappings":";;AAGA,SAAgB,oBAAoB,EAClC,cACA,cACA,gBACA,UACA,YACA,SACA,QACA,SACA,UACA,MACA,iBACA,qBAcC;CACD,gBAAgB;EAEd,MAAM,QAAQ,SAAS;EACvB,MAAM,OAAO,QAAQ;EAErB,OAAO,aAAa,MAAM,eAAe;EACzC,OAAO,aAAa,iBAAiB,MAAM;EAC3C,OAAO,aAAa,iBAAiB,OAAO,IAAI,CAAC;EACjD,OAAO,aAAa,iBAAiB,SAAS;EAC9C,OAAO,aAAa,gBAAgB,gBAAgB,KAAK;EACzD,IAAI,gBACF,OAAO,aAAa,cAAc,cAAc;OAC3C;GACL,OAAO,gBAAgB,YAAY;GACnC,OAAO,gBAAgB,iBAAiB;EAC1C;EACA,IAAI,SACF,OAAO,aAAa,gBAAgB,MAAM;OAE1C,OAAO,gBAAgB,cAAc;EAEvC,IAAI,UACF,OAAO,aAAa,oBAAoB,iBAAiB;OAEzD,OAAO,gBAAgB,kBAAkB;EAG3C,MAAM,aAAa,MAAM,MAAM;EAC/B,MAAM,aAAa,cAAc,GAAG,aAAa,SAAS;EAC1D,IAAI,UACF,MAAM,aAAa,wBAAwB,MAAM;OAEjD,MAAM,gBAAgB,sBAAsB;CAEhD,GAAG;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;AACH"}
+{"version":3,"file":"useTypeaheadDomSync.js","names":[],"sources":["../../../src/components/Typeahead/useTypeaheadDomSync.ts"],"sourcesContent":["import type { RefObject } from 'react';\nimport { useCallback, useEffect } from 'react';\n\nexport function useTypeaheadDomSync({\n  autoComplete,\n  commandLabel,\n  inputAriaLabel,\n  inputRef,\n  inputValue,\n  isError,\n  listId,\n  listRef,\n  multiple,\n  open,\n  resolvedInputId,\n  selectedSummaryId,\n}: {\n  autoComplete?: string;\n  commandLabel: string;\n  inputAriaLabel?: string;\n  inputRef: RefObject<HTMLInputElement | null>;\n  inputValue: string;\n  isError: boolean;\n  listId: string;\n  listRef: RefObject<HTMLDivElement | null>;\n  multiple?: boolean;\n  open: boolean;\n  resolvedInputId: string;\n  selectedSummaryId: string;\n}) {\n  // The portaled list mounts after the input's effects have run.\n  const setListNode = useCallback(\n    (list: HTMLDivElement | null) => {\n      listRef.current = list;\n      list?.setAttribute('id', listId);\n      list?.setAttribute('aria-label', `${commandLabel} options`);\n      if (multiple) {\n        list?.setAttribute('aria-multiselectable', 'true');\n      } else {\n        list?.removeAttribute('aria-multiselectable');\n      }\n    },\n    [commandLabel, listId, listRef, multiple]\n  );\n\n  useEffect(() => {\n    // cmdk owns these DOM nodes and may rewrite combobox attributes as input changes.\n    const input = inputRef.current;\n\n    input?.setAttribute('id', resolvedInputId);\n    input?.setAttribute('aria-controls', listId);\n    input?.setAttribute('aria-expanded', String(open));\n    input?.setAttribute('aria-haspopup', 'listbox');\n    input?.setAttribute('autocomplete', autoComplete ?? 'off');\n    if (inputAriaLabel) {\n      input?.setAttribute('aria-label', inputAriaLabel);\n    } else {\n      input?.removeAttribute('aria-label');\n      input?.removeAttribute('aria-labelledby');\n    }\n    if (isError) {\n      input?.setAttribute('aria-invalid', 'true');\n    } else {\n      input?.removeAttribute('aria-invalid');\n    }\n    if (multiple) {\n      input?.setAttribute('aria-describedby', selectedSummaryId);\n    } else {\n      input?.removeAttribute('aria-describedby');\n    }\n  }, [\n    autoComplete,\n    inputAriaLabel,\n    inputRef,\n    inputValue,\n    isError,\n    listId,\n    multiple,\n    open,\n    resolvedInputId,\n    selectedSummaryId,\n  ]);\n\n  return setListNode;\n}\n"],"mappings":";;AAGA,SAAgB,oBAAoB,EAClC,cACA,cACA,gBACA,UACA,YACA,SACA,QACA,SACA,UACA,MACA,iBACA,qBAcC;CAED,MAAM,cAAc,aACjB,SAAgC;EAC/B,QAAQ,UAAU;EAClB,MAAM,aAAa,MAAM,MAAM;EAC/B,MAAM,aAAa,cAAc,GAAG,aAAa,SAAS;EAC1D,IAAI,UACF,MAAM,aAAa,wBAAwB,MAAM;OAEjD,MAAM,gBAAgB,sBAAsB;CAEhD,GACA;EAAC;EAAc;EAAQ;EAAS;CAAQ,CAC1C;CAEA,gBAAgB;EAEd,MAAM,QAAQ,SAAS;EAEvB,OAAO,aAAa,MAAM,eAAe;EACzC,OAAO,aAAa,iBAAiB,MAAM;EAC3C,OAAO,aAAa,iBAAiB,OAAO,IAAI,CAAC;EACjD,OAAO,aAAa,iBAAiB,SAAS;EAC9C,OAAO,aAAa,gBAAgB,gBAAgB,KAAK;EACzD,IAAI,gBACF,OAAO,aAAa,cAAc,cAAc;OAC3C;GACL,OAAO,gBAAgB,YAAY;GACnC,OAAO,gBAAgB,iBAAiB;EAC1C;EACA,IAAI,SACF,OAAO,aAAa,gBAAgB,MAAM;OAE1C,OAAO,gBAAgB,cAAc;EAEvC,IAAI,UACF,OAAO,aAAa,oBAAoB,iBAAiB;OAEzD,OAAO,gBAAgB,kBAAkB;CAE7C,GAAG;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OAAO;AACT"}

package/dist/components/Typeahead/useTypeaheadUncontrolledInput.d.ts

@@ -1,9 +1,10 @@
 import type { TypeaheadMultipleValue, TypeaheadSelectedValue, TypeaheadSingleValue } from './Typeahead.types.js';
-export declare function useTypeaheadUncontrolledInput<TOption>({ clearOnBlur, controlledInputValue, freeSolo, getLabel, multiple, open, setUncontrolledInputValue, value, }: {
+export declare function useTypeaheadUncontrolledInput<TOption>({ clearOnBlur, controlledInputValue, freeSolo, getLabel, getValue, multiple, open, setUncontrolledInputValue, value, }: {
     clearOnBlur?: boolean;
     controlledInputValue?: string;
     freeSolo: boolean;
     getLabel: (option: TypeaheadSelectedValue<TOption>) => string;
+    getValue: (option: TypeaheadSelectedValue<TOption>) => string;
     multiple?: boolean;
     open: boolean;
     setUncontrolledInputValue: (value: string) => void;

package/dist/components/Typeahead/useTypeaheadUncontrolledInput.js

@@ -1,29 +1,30 @@
 import { useEffect } from "react";
 //#region packages/components/src/components/Typeahead/useTypeaheadUncontrolledInput.ts
-function useTypeaheadUncontrolledInput({ clearOnBlur, controlledInputValue, freeSolo, getLabel, multiple, open, setUncontrolledInputValue, value }) {
+function useTypeaheadUncontrolledInput({ clearOnBlur, controlledInputValue, freeSolo, getLabel, getValue, multiple, open, setUncontrolledInputValue, value }) {
 	const singleValue = Array.isArray(value) ? null : value;
+	const selectedLabel = singleValue == null ? "" : getLabel(singleValue);
+	const selectedKey = singleValue == null ? null : getValue(singleValue);
 	useEffect(() => {
 		if (controlledInputValue !== void 0 || multiple) return;
-		setUncontrolledInputValue(singleValue == null ? "" : getLabel(singleValue));
+		setUncontrolledInputValue(selectedLabel);
 	}, [
 		controlledInputValue,
-		getLabel,
 		multiple,
-		setUncontrolledInputValue,
-		singleValue
+		selectedKey,
+		selectedLabel,
+		setUncontrolledInputValue
 	]);
 	useEffect(() => {
 		if (open || controlledInputValue !== void 0) return;
-		if (clearOnBlur ?? !freeSolo) setUncontrolledInputValue(multiple || singleValue == null ? "" : getLabel(singleValue));
+		if (clearOnBlur ?? !freeSolo) setUncontrolledInputValue(multiple ? "" : selectedLabel);
 	}, [
 		clearOnBlur,
 		controlledInputValue,
 		freeSolo,
-		getLabel,
 		multiple,
 		open,
-		setUncontrolledInputValue,
-		singleValue
+		selectedLabel,
+		setUncontrolledInputValue
 	]);
 }
 //#endregion

package/dist/components/Typeahead/useTypeaheadUncontrolledInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTypeaheadUncontrolledInput.js","names":[],"sources":["../../../src/components/Typeahead/useTypeaheadUncontrolledInput.ts"],"sourcesContent":["import { useEffect } from 'react';\n\nimport type {\n  TypeaheadMultipleValue,\n  TypeaheadSelectedValue,\n  TypeaheadSingleValue,\n} from './Typeahead.types';\n\nexport function useTypeaheadUncontrolledInput<TOption>({\n  clearOnBlur,\n  controlledInputValue,\n  freeSolo,\n  getLabel,\n  multiple,\n  open,\n  setUncontrolledInputValue,\n  value,\n}: {\n  clearOnBlur?: boolean;\n  controlledInputValue?: string;\n  freeSolo: boolean;\n  getLabel: (option: TypeaheadSelectedValue<TOption>) => string;\n  multiple?: boolean;\n  open: boolean;\n  setUncontrolledInputValue: (value: string) => void;\n  value: TypeaheadSingleValue<TOption> | TypeaheadMultipleValue<TOption>;\n}) {\n  const singleValue: TypeaheadSingleValue<TOption> = Array.isArray(value)\n    ? null\n    : value;\n\n  useEffect(() => {\n    if (controlledInputValue !== undefined || multiple) return;\n    setUncontrolledInputValue(singleValue == null ? '' : getLabel(singleValue));\n  }, [\n    controlledInputValue,\n    getLabel,\n    multiple,\n    setUncontrolledInputValue,\n    singleValue,\n  ]);\n\n  useEffect(() => {\n    if (open || controlledInputValue !== undefined) return;\n    if (clearOnBlur ?? !freeSolo) {\n      setUncontrolledInputValue(\n        multiple || singleValue == null ? '' : getLabel(singleValue)\n      );\n    }\n  }, [\n    clearOnBlur,\n    controlledInputValue,\n    freeSolo,\n    getLabel,\n    multiple,\n    open,\n    setUncontrolledInputValue,\n    singleValue,\n  ]);\n}\n"],"mappings":";;AAQA,SAAgB,8BAAuC,EACrD,aACA,sBACA,UACA,UACA,UACA,MACA,2BACA,SAUC;CACD,MAAM,cAA6C,MAAM,QAAQ,KAAK,IAClE,OACA;CAEJ,gBAAgB;EACd,IAAI,yBAAyB,KAAA,KAAa,UAAU;EACpD,0BAA0B,eAAe,OAAO,KAAK,SAAS,WAAW,CAAC;CAC5E,GAAG;EACD;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,gBAAgB;EACd,IAAI,QAAQ,yBAAyB,KAAA,GAAW;EAChD,IAAI,eAAe,CAAC,UAClB,0BACE,YAAY,eAAe,OAAO,KAAK,SAAS,WAAW,CAC7D;CAEJ,GAAG;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;AACH"}
+{"version":3,"file":"useTypeaheadUncontrolledInput.js","names":[],"sources":["../../../src/components/Typeahead/useTypeaheadUncontrolledInput.ts"],"sourcesContent":["import { useEffect } from 'react';\n\nimport type {\n  TypeaheadMultipleValue,\n  TypeaheadSelectedValue,\n  TypeaheadSingleValue,\n} from './Typeahead.types';\n\nexport function useTypeaheadUncontrolledInput<TOption>({\n  clearOnBlur,\n  controlledInputValue,\n  freeSolo,\n  getLabel,\n  getValue,\n  multiple,\n  open,\n  setUncontrolledInputValue,\n  value,\n}: {\n  clearOnBlur?: boolean;\n  controlledInputValue?: string;\n  freeSolo: boolean;\n  getLabel: (option: TypeaheadSelectedValue<TOption>) => string;\n  getValue: (option: TypeaheadSelectedValue<TOption>) => string;\n  multiple?: boolean;\n  open: boolean;\n  setUncontrolledInputValue: (value: string) => void;\n  value: TypeaheadSingleValue<TOption> | TypeaheadMultipleValue<TOption>;\n}) {\n  const singleValue: TypeaheadSingleValue<TOption> = Array.isArray(value)\n    ? null\n    : value;\n  const selectedLabel = singleValue == null ? '' : getLabel(singleValue);\n  const selectedKey = singleValue == null ? null : getValue(singleValue);\n\n  // Equivalent options and recreated callbacks must not replace an active query.\n  useEffect(() => {\n    if (controlledInputValue !== undefined || multiple) return;\n    setUncontrolledInputValue(selectedLabel);\n  }, [\n    controlledInputValue,\n    multiple,\n    selectedKey,\n    selectedLabel,\n    setUncontrolledInputValue,\n  ]);\n\n  useEffect(() => {\n    if (open || controlledInputValue !== undefined) return;\n    if (clearOnBlur ?? !freeSolo) {\n      setUncontrolledInputValue(multiple ? '' : selectedLabel);\n    }\n  }, [\n    clearOnBlur,\n    controlledInputValue,\n    freeSolo,\n    multiple,\n    open,\n    selectedLabel,\n    setUncontrolledInputValue,\n  ]);\n}\n"],"mappings":";;AAQA,SAAgB,8BAAuC,EACrD,aACA,sBACA,UACA,UACA,UACA,UACA,MACA,2BACA,SAWC;CACD,MAAM,cAA6C,MAAM,QAAQ,KAAK,IAClE,OACA;CACJ,MAAM,gBAAgB,eAAe,OAAO,KAAK,SAAS,WAAW;CACrE,MAAM,cAAc,eAAe,OAAO,OAAO,SAAS,WAAW;CAGrE,gBAAgB;EACd,IAAI,yBAAyB,KAAA,KAAa,UAAU;EACpD,0BAA0B,aAAa;CACzC,GAAG;EACD;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,gBAAgB;EACd,IAAI,QAAQ,yBAAyB,KAAA,GAAW;EAChD,IAAI,eAAe,CAAC,UAClB,0BAA0B,WAAW,KAAK,aAAa;CAE3D,GAAG;EACD;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;AACH"}

package/dist/components/UnsavedChangesDialog.js

@@ -1,10 +1,10 @@
 import { Text } from "./Text/Text.js";
-import { Tooltip } from "./Tooltip/Tooltip.js";
 import { Button } from "./Button/Button.js";
+import { Tooltip } from "./Tooltip/Tooltip.js";
 import { Dialog, DialogContent } from "./Dialog/index.js";
+import { WarningCircleIcon } from "@phosphor-icons/react/dist/ssr/WarningCircle";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { FloppyDiskIcon } from "@phosphor-icons/react/dist/ssr/FloppyDisk";
-import { WarningCircleIcon } from "@phosphor-icons/react/dist/ssr/WarningCircle";
 //#region packages/components/src/components/UnsavedChangesDialog.tsx
 var UnsavedChangesDialog = ({ isOpen, onClose, onConfirm, onDiscard, title, description, saveCopy = "Save", discardCopy = "Discard", disabledSaveTooltip }) => {
 	return /* @__PURE__ */ jsx(Dialog, {

package/dist/components/index.d.ts

@@ -10,6 +10,8 @@ export { EmptyState } from './EmptyState/index.js';
 export type { EmptyStateProps, EmptyStateSize, EmptyStateVariant, } from './EmptyState/index.js';
 export { Avatar } from './Avatar/index.js';
 export type { AvatarProps } from './Avatar/index.js';
+export { Attachment, AttachmentList } from './Attachment/index.js';
+export type { AttachmentProps, AttachmentListProps } from './Attachment/index.js';
 export { ErrorState } from './ErrorState/index.js';
 export type { ErrorStateProps } from './ErrorState/index.js';
 export { Badge } from './Badge/index.js';
@@ -49,7 +51,7 @@ export { Skeleton, SkeletonRows, CircleSkeleton } from './Skeleton/index.js';
 export { LinearProgress } from './LinearProgress/index.js';
 export type { LinearProgressProps } from './LinearProgress/index.js';
 export { formatMetricCurrency, formatMetricDate, formatMetricDuration, formatMetricNumber, formatMetricTime, MetricChart, } from './MetricChart/index.js';
-export type { MetricChartProps, MetricChartSize, MetricCurrencyFormatOptions, MetricDateTimeFormatOptions, MetricDurationFormatOptions, MetricDurationUnit, MetricNumberFormatOptions, } from './MetricChart/index.js';
+export type { MetricChartProps, MetricChartSize, MetricChartUnit, MetricCurrencyFormatOptions, MetricDateTimeFormatOptions, MetricDurationFormatOptions, MetricDurationUnit, MetricNumberFormatOptions, } from './MetricChart/index.js';
 export { ProgressBar } from './ProgressBar/index.js';
 export type { ProgressBarColor, ProgressBarLabelPosition, ProgressBarProps, ProgressBarSize, } from './ProgressBar/index.js';
 export { Slider } from './Slider/index.js';

package/dist/components/index.js

@@ -1,13 +1,15 @@
 import { Text } from "./Text/Text.js";
+import { Badge } from "./Badge/Badge.js";
+import { Spinner, SpinnerIcon } from "./Spinner/Spinner.js";
+import { Button } from "./Button/Button.js";
 import { Tooltip } from "./Tooltip/Tooltip.js";
 import { TooltipProvider } from "./Tooltip/index.js";
-import { Avatar } from "./Avatar/Avatar.js";
-import { Badge } from "./Badge/Badge.js";
 import { Icon } from "./Icon/Icon.js";
-import { Spinner, SpinnerIcon } from "./Spinner/Spinner.js";
 import { IconButton } from "./IconButton/IconButton.js";
+import { Attachment } from "./Attachment/Attachment.js";
+import { AttachmentList } from "./Attachment/AttachmentList.js";
+import { Avatar } from "./Avatar/Avatar.js";
 import { Banner } from "./Banner/Banner.js";
-import { Button } from "./Button/Button.js";
 import { ButtonGroup } from "./ButtonGroup/ButtonGroup.js";
 import { Card } from "./Card/Card.js";
 import { Link } from "./Link/Link.js";
@@ -32,4 +34,4 @@ import { RadioGroupItem } from "./RadioGroup/RadioGroupItem.js";
 import { Slider } from "./Slider/Slider.js";
 import { Switch } from "./Switch/Switch.js";
 import { Textarea } from "./Textarea/Textarea.js";
-export { Avatar, Badge, Banner, Button, ButtonGroup, Card, ChartTooltip, ChartTooltipBody, ChartTooltipHeader, ChartTooltipRow, Checkbox, CircleSkeleton, Divider, EmptyState, ErrorState, GroupedTabs, Icon, IconButton, Input, Kbd, KbdGroup, LinearProgress, Link, MetricChart, ProgressBar, RadioButton, RadioCard, RadioGroup, RadioGroupItem, Skeleton, SkeletonRows, Slider, Spinner, SpinnerIcon, Switch, Text, Textarea, Tooltip, TooltipProvider, formatMetricCurrency, formatMetricDate, formatMetricDuration, formatMetricNumber, formatMetricTime, getCheckedState };
+export { Attachment, AttachmentList, Avatar, Badge, Banner, Button, ButtonGroup, Card, ChartTooltip, ChartTooltipBody, ChartTooltipHeader, ChartTooltipRow, Checkbox, CircleSkeleton, Divider, EmptyState, ErrorState, GroupedTabs, Icon, IconButton, Input, Kbd, KbdGroup, LinearProgress, Link, MetricChart, ProgressBar, RadioButton, RadioCard, RadioGroup, RadioGroupItem, Skeleton, SkeletonRows, Slider, Spinner, SpinnerIcon, Switch, Text, Textarea, Tooltip, TooltipProvider, formatMetricCurrency, formatMetricDate, formatMetricDuration, formatMetricNumber, formatMetricTime, getCheckedState };

package/dist/components.css

@@ -1,34 +1,34 @@
 /* Adapted from TurboKach/ai-native-react-components (MIT). See NOTICE. */
-._grid_hucnx_2 {
+._grid_167sb_2 {
   display: inline-grid;
   grid-template: repeat(3, minmax(0, 1fr)) / repeat(3, minmax(0, 1fr));
   gap: 10%;
 }
 
-._pixel_hucnx_8 {
+._pixel_167sb_8 {
   border-radius: 1px;
   opacity: 0.15;
-  animation: _pixel-on_hucnx_1 var(--loading-cycle) ease-in-out infinite;
+  animation: _pixel-on_167sb_1 var(--loading-cycle) ease-in-out infinite;
 }
 
-._dot_hucnx_14 {
+._dot_167sb_14 {
   border-radius: var(--radius-full);
 }
 
-._inactive_hucnx_18 {
+._inactive_167sb_18 {
   opacity: 0.07;
   animation: none;
 }
 
-._grid_hucnx_2[data-animated='false'] ._pixel_hucnx_8 {
+._grid_167sb_2[data-animated='false'] ._pixel_167sb_8 {
   animation: none;
 }
 
-._grid_hucnx_2[data-animated='false'] ._pixel_hucnx_8:not(._inactive_hucnx_18) {
+._grid_167sb_2[data-animated='false'] ._pixel_167sb_8:not(._inactive_167sb_18) {
   opacity: 0.5;
 }
 
-._shimmer_hucnx_31 {
+._shimmer_167sb_31 {
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
   --tw-gradient-from: var(--text-tertiary) var(--tw-gradient-from-position);
   --tw-gradient-to: color-mix(in srgb, var(--text-tertiary) calc(0 * 100%), transparent) var(--tw-gradient-to-position);
@@ -42,16 +42,20 @@
   background-clip: text;
   color: transparent;
   background-size: 200% 100%;
-  animation: _shimmer-text_hucnx_1 1.4s linear infinite;
+  animation: _shimmer-text_167sb_1 1.4s linear infinite;
 }
 
-._brandShimmer_hucnx_37 {
+._slow_167sb_37 {
+  animation-duration: 2.8s;
+}
+
+._brandShimmer_167sb_41 {
   --tw-gradient-to: color-mix(in srgb, var(--text-brand-primary) calc(0 * 100%), transparent)  var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--text-brand-primary) var(--tw-gradient-via-position), var(--tw-gradient-to);
   --tw-gradient-to: var(--text-tertiary) var(--tw-gradient-to-position);
 }
 
-@keyframes _pixel-on_hucnx_1 {
+@keyframes _pixel-on_167sb_1 {
   0%,
   100% {
     opacity: 0.15;
@@ -65,7 +69,7 @@
   }
 }
 
-@keyframes _shimmer-text_hucnx_1 {
+@keyframes _shimmer-text_167sb_1 {
   from {
     background-position: 150% 50%;
   }
@@ -75,15 +79,15 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  ._pixel_hucnx_8,
-  ._shimmer_hucnx_31 {
+  ._pixel_167sb_8,
+  ._shimmer_167sb_31 {
     animation: none;
   }
 
-  ._pixel_hucnx_8:not(._inactive_hucnx_18) {
+  ._pixel_167sb_8:not(._inactive_167sb_18) {
     opacity: 0.5;
   }
-  ._shimmer_hucnx_31 {
+  ._shimmer_167sb_31 {
     --tw-text-opacity: 1;
     color: color-mix(in srgb, var(--text-secondary) calc(var(--tw-text-opacity, 1) * 100%), transparent);
     background: none;
@@ -91,11 +95,11 @@
 }
 
 @media (forced-colors: active) {
-  ._shimmer_hucnx_31 {
+  ._shimmer_167sb_31 {
     background: none;
     color: CanvasText;
   }
-  ._pixel_hucnx_8 {
+  ._pixel_167sb_8 {
     background: CanvasText;
   }
 }

package/dist/hooks/useDebouncedCommit.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Keep this hook in the owner of a resource's draft, above conditionally mounted
+ * editors. Update the draft synchronously, then schedule its accepted value.
+ * Commits run in order and survive unmount. Each callback must return a promise
+ * covering the full write; it must settle before the next write starts.
+ */
+export declare function useDebouncedCommit<T>({ onCommit, onError, delay, }: {
+    onCommit: (value: T) => void | Promise<unknown>;
+    onError: (error: unknown) => void;
+    delay: number;
+}): {
+    schedule: (value: T) => void;
+    flush: () => void;
+};

package/dist/hooks/useDebouncedCommit.js

@@ -0,0 +1,35 @@
+import { useEffect, useRef } from "react";
+import { useDebouncedCallback } from "use-debounce";
+//#region packages/components/src/hooks/useDebouncedCommit.ts
+/**
+* Keep this hook in the owner of a resource's draft, above conditionally mounted
+* editors. Update the draft synchronously, then schedule its accepted value.
+* Commits run in order and survive unmount. Each callback must return a promise
+* covering the full write; it must settle before the next write starts.
+*/
+function useDebouncedCommit({ onCommit, onError, delay }) {
+	const pending = useRef(null);
+	const commit = useDebouncedCallback((value, commitValue, reportError) => {
+		const run = async () => {
+			try {
+				await commitValue(value);
+			} catch (error) {
+				reportError(error);
+			}
+		};
+		const completion = (pending.current ?? Promise.resolve()).then(run, run);
+		pending.current = completion;
+		return completion;
+	}, delay);
+	useEffect(() => () => void commit.flush(), [commit]);
+	return {
+		schedule: (value) => {
+			commit(value, onCommit, onError);
+		},
+		flush: commit.flush
+	};
+}
+//#endregion
+export { useDebouncedCommit };
+
+//# sourceMappingURL=useDebouncedCommit.js.map

package/dist/hooks/useDebouncedCommit.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDebouncedCommit.js","names":[],"sources":["../../src/hooks/useDebouncedCommit.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nimport { useDebouncedCallback } from 'use-debounce';\n\n/**\n * Keep this hook in the owner of a resource's draft, above conditionally mounted\n * editors. Update the draft synchronously, then schedule its accepted value.\n * Commits run in order and survive unmount. Each callback must return a promise\n * covering the full write; it must settle before the next write starts.\n */\nexport function useDebouncedCommit<T>({\n  onCommit,\n  onError,\n  delay,\n}: {\n  onCommit: (value: T) => void | Promise<unknown>;\n  onError: (error: unknown) => void;\n  delay: number;\n}) {\n  const pending = useRef<Promise<void> | null>(null);\n  const commit = useDebouncedCallback(\n    (value: T, commitValue: typeof onCommit, reportError: typeof onError) => {\n      const run = async () => {\n        try {\n          await commitValue(value);\n        } catch (error) {\n          reportError(error);\n        }\n      };\n      // Capture this value and callback before waiting for earlier writes.\n      const completion = (pending.current ?? Promise.resolve()).then(run, run);\n      pending.current = completion;\n      return completion;\n    },\n    delay\n  );\n\n  useEffect(() => () => void commit.flush(), [commit]);\n\n  return {\n    schedule: (value: T) => {\n      commit(value, onCommit, onError);\n    },\n    flush: commit.flush,\n  };\n}\n"],"mappings":";;;;;;;;;AAUA,SAAgB,mBAAsB,EACpC,UACA,SACA,SAKC;CACD,MAAM,UAAU,OAA6B,IAAI;CACjD,MAAM,SAAS,sBACZ,OAAU,aAA8B,gBAAgC;EACvE,MAAM,MAAM,YAAY;GACtB,IAAI;IACF,MAAM,YAAY,KAAK;GACzB,SAAS,OAAO;IACd,YAAY,KAAK;GACnB;EACF;EAEA,MAAM,cAAc,QAAQ,WAAW,QAAQ,QAAQ,EAAA,CAAG,KAAK,KAAK,GAAG;EACvE,QAAQ,UAAU;EAClB,OAAO;CACT,GACA,KACF;CAEA,sBAAsB,KAAK,OAAO,MAAM,GAAG,CAAC,MAAM,CAAC;CAEnD,OAAO;EACL,WAAW,UAAa;GACtB,OAAO,OAAO,UAAU,OAAO;EACjC;EACA,OAAO,OAAO;CAChB;AACF"}

package/dist/icons/LongTailPhosphorIcons.js

@@ -1,11 +1,11 @@
 import { CaretDownIcon, CaretRightIcon, MinusIcon } from "./PaddedPhosphorIcons.js";
 import { jsx } from "react/jsx-runtime";
 import { InfoIcon } from "@phosphor-icons/react/dist/ssr/Info";
+import { CaretUpDownIcon } from "@phosphor-icons/react/dist/ssr/CaretUpDown";
 import { BinaryIcon } from "@phosphor-icons/react/dist/ssr/Binary";
 import { BriefcaseIcon } from "@phosphor-icons/react/dist/ssr/Briefcase";
 import { BuildingsIcon } from "@phosphor-icons/react/dist/ssr/Buildings";
 import { CarIcon } from "@phosphor-icons/react/dist/ssr/Car";
-import { CaretUpDownIcon } from "@phosphor-icons/react/dist/ssr/CaretUpDown";
 import { ChatCenteredDotsIcon } from "@phosphor-icons/react/dist/ssr/ChatCenteredDots";
 import { ClockCounterClockwiseIcon } from "@phosphor-icons/react/dist/ssr/ClockCounterClockwise";
 import { CodepenLogoIcon } from "@phosphor-icons/react/dist/ssr/CodepenLogo";

package/dist/icons/PaddedPhosphorIcons.d.ts

@@ -6,6 +6,7 @@ export declare const ArrowUpIcon: IconComponent;
 export declare const CaretDoubleRightIcon: IconComponent;
 export declare const CaretDoubleLeftIcon: IconComponent;
 export declare const CaretDownIcon: IconComponent;
+export declare const CaretUpDownIcon: IconComponent;
 export declare const CaretLeftIcon: IconComponent;
 export declare const CaretRightIcon: IconComponent;
 export declare const CaretUpIcon: IconComponent;

package/dist/icons/PaddedPhosphorIcons.js

@@ -1,3 +1,4 @@
+import { XIcon as XIcon$1 } from "@phosphor-icons/react/dist/ssr/X";
 import { jsx } from "react/jsx-runtime";
 import { ArrowDownIcon as ArrowDownIcon$1 } from "@phosphor-icons/react/dist/ssr/ArrowDown";
 import { ArrowLeftIcon as ArrowLeftIcon$1 } from "@phosphor-icons/react/dist/ssr/ArrowLeft";
@@ -9,11 +10,11 @@ import { CaretDownIcon as CaretDownIcon$1 } from "@phosphor-icons/react/dist/ssr
 import { CaretLeftIcon as CaretLeftIcon$1 } from "@phosphor-icons/react/dist/ssr/CaretLeft";
 import { CaretRightIcon as CaretRightIcon$1 } from "@phosphor-icons/react/dist/ssr/CaretRight";
 import { CaretUpIcon as CaretUpIcon$1 } from "@phosphor-icons/react/dist/ssr/CaretUp";
+import { CaretUpDownIcon as CaretUpDownIcon$1 } from "@phosphor-icons/react/dist/ssr/CaretUpDown";
 import { CheckIcon as CheckIcon$1 } from "@phosphor-icons/react/dist/ssr/Check";
 import { DotsSixVerticalIcon as DotsSixVerticalIcon$1 } from "@phosphor-icons/react/dist/ssr/DotsSixVertical";
 import { MinusIcon as MinusIcon$1 } from "@phosphor-icons/react/dist/ssr/Minus";
 import { PlusIcon as PlusIcon$1 } from "@phosphor-icons/react/dist/ssr/Plus";
-import { XIcon as XIcon$1 } from "@phosphor-icons/react/dist/ssr/X";
 //#region packages/components/src/icons/PaddedPhosphorIcons.tsx
 var createPaddedIcon = (IconComponent, inset, displayName, extraBold = false) => {
 	const viewBox = `${-inset} ${-inset} ${256 + inset * 2} ${256 + inset * 2}`;
@@ -40,6 +41,7 @@ var ArrowUpIcon = /* @__PURE__ */ createPaddedIcon(ArrowUpIcon$1, 32, "ArrowUpIc
 var CaretDoubleRightIcon = /* @__PURE__ */ createPaddedIcon(CaretDoubleRightIcon$1, 64, "CaretDoubleRightIcon", true);
 var CaretDoubleLeftIcon = /* @__PURE__ */ createPaddedIcon(CaretDoubleLeftIcon$1, 64, "CaretDoubleLeftIcon", true);
 var CaretDownIcon = /* @__PURE__ */ createPaddedIcon(CaretDownIcon$1, 64, "CaretDownIcon", true);
+var CaretUpDownIcon = /* @__PURE__ */ createPaddedIcon(CaretUpDownIcon$1, 64, "CaretUpDownIcon", true);
 var CaretLeftIcon = /* @__PURE__ */ createPaddedIcon(CaretLeftIcon$1, 64, "CaretLeftIcon", true);
 var CaretRightIcon = /* @__PURE__ */ createPaddedIcon(CaretRightIcon$1, 64, "CaretRightIcon", true);
 var CaretUpIcon = /* @__PURE__ */ createPaddedIcon(CaretUpIcon$1, 64, "CaretUpIcon", true);
@@ -50,6 +52,6 @@ var PlusIcon = /* @__PURE__ */ createPaddedIcon(PlusIcon$1, 40, "PlusIcon");
 var XCloseIcon = /* @__PURE__ */ createPaddedIcon(XIcon$1, 40, "XCloseIcon", true);
 var XIcon = /* @__PURE__ */ createPaddedIcon(XIcon$1, 64, "XIcon", true);
 //#endregion
-export { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, CaretDoubleLeftIcon, CaretDoubleRightIcon, CaretDownIcon, CaretLeftIcon, CaretRightIcon, CaretUpIcon, CheckIcon, DotsSixVerticalIcon, MinusIcon, PlusIcon, XCloseIcon, XIcon };
+export { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, CaretDoubleLeftIcon, CaretDoubleRightIcon, CaretDownIcon, CaretLeftIcon, CaretRightIcon, CaretUpDownIcon, CaretUpIcon, CheckIcon, DotsSixVerticalIcon, MinusIcon, PlusIcon, XCloseIcon, XIcon };
 
 //# sourceMappingURL=PaddedPhosphorIcons.js.map

package/dist/icons/PaddedPhosphorIcons.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaddedPhosphorIcons.js","names":[],"sources":["../../src/icons/PaddedPhosphorIcons.tsx"],"sourcesContent":["import { ArrowDownIcon as PhosphorArrowDownIcon } from '@phosphor-icons/react/dist/ssr/ArrowDown';\nimport { ArrowLeftIcon as PhosphorArrowLeftIcon } from '@phosphor-icons/react/dist/ssr/ArrowLeft';\nimport { ArrowRightIcon as PhosphorArrowRightIcon } from '@phosphor-icons/react/dist/ssr/ArrowRight';\nimport { ArrowUpIcon as PhosphorArrowUpIcon } from '@phosphor-icons/react/dist/ssr/ArrowUp';\nimport { CaretDoubleLeftIcon as PhosphorCaretDoubleLeftIcon } from '@phosphor-icons/react/dist/ssr/CaretDoubleLeft';\nimport { CaretDoubleRightIcon as PhosphorCaretDoubleRightIcon } from '@phosphor-icons/react/dist/ssr/CaretDoubleRight';\nimport { CaretDownIcon as PhosphorCaretDownIcon } from '@phosphor-icons/react/dist/ssr/CaretDown';\nimport { CaretLeftIcon as PhosphorCaretLeftIcon } from '@phosphor-icons/react/dist/ssr/CaretLeft';\nimport { CaretRightIcon as PhosphorCaretRightIcon } from '@phosphor-icons/react/dist/ssr/CaretRight';\nimport { CaretUpIcon as PhosphorCaretUpIcon } from '@phosphor-icons/react/dist/ssr/CaretUp';\nimport { CheckIcon as PhosphorCheckIcon } from '@phosphor-icons/react/dist/ssr/Check';\nimport { DotsSixVerticalIcon as PhosphorDotsSixVerticalIcon } from '@phosphor-icons/react/dist/ssr/DotsSixVertical';\nimport { MinusIcon as PhosphorMinusIcon } from '@phosphor-icons/react/dist/ssr/Minus';\nimport { PlusIcon as PhosphorPlusIcon } from '@phosphor-icons/react/dist/ssr/Plus';\nimport { XIcon as PhosphorXIcon } from '@phosphor-icons/react/dist/ssr/X';\n\nimport type { IconComponent } from '../utils/icon-types';\n\nconst createPaddedIcon = (\n  IconComponent: IconComponent,\n  inset: number,\n  displayName: string,\n  extraBold = false\n): IconComponent => {\n  const viewBox = `${-inset} ${-inset} ${256 + inset * 2} ${256 + inset * 2}`;\n  const PaddedIcon: IconComponent = ({\n    color,\n    stroke,\n    strokeWidth,\n    strokeLinecap,\n    strokeLinejoin,\n    weight,\n    ...props\n  }) => {\n    const applyExtraBold = extraBold && weight === 'bold';\n    return (\n      <IconComponent\n        {...props}\n        color={color}\n        stroke={\n          stroke ?? (applyExtraBold ? color || 'currentColor' : undefined)\n        }\n        strokeWidth={strokeWidth ?? (applyExtraBold ? 8 : undefined)}\n        strokeLinecap={strokeLinecap ?? (applyExtraBold ? 'round' : undefined)}\n        strokeLinejoin={\n          strokeLinejoin ?? (applyExtraBold ? 'round' : undefined)\n        }\n        weight={weight}\n        viewBox={viewBox}\n      />\n    );\n  };\n\n  PaddedIcon.displayName = displayName;\n  return PaddedIcon;\n};\n\n// These compact glyphs fill more of Phosphor's canvas than their Untitled UI\n// counterparts. Expanded viewBoxes preserve the outer size while restoring the\n// previous optical footprint.\nexport const ArrowDownIcon = /* @__PURE__ */ createPaddedIcon(\n  PhosphorArrowDownIcon,\n  32,\n  'ArrowDownIcon'\n);\nexport const ArrowLeftIcon = /* @__PURE__ */ createPaddedIcon(\n  PhosphorArrowLeftIcon,\n  32,\n  'ArrowLeftIcon'\n);\nexport const ArrowRightIcon = /* @__PURE__ */ createPaddedIcon(\n  PhosphorArrowRightIcon,\n  32,\n  'ArrowRightIcon'\n);\nexport const ArrowUpIcon = /* @__PURE__ */ createPaddedIcon(\n  PhosphorArrowUpIcon,\n  32,\n  'ArrowUpIcon'\n);\nexport const CaretDoubleRightIcon = /* @__PURE__ */ createPaddedIcon(\n  PhosphorCaretDoubleRightIcon,\n  64,\n  'CaretDoubleRightIcon',\n  true\n);\nexport const CaretDoubleLeftIcon = /* @__PURE__ */ createPaddedIcon(\n  PhosphorCaretDoubleLeftIcon,\n  64,\n  'CaretDoubleLeftIcon',\n  true\n);\nexport const CaretDownIcon = /* @__PURE__ */ createPaddedIcon(\n  PhosphorCaretDownIcon,\n  64,\n  'CaretDownIcon',\n  true\n);\nexport const CaretLeftIcon = /* @__PURE__ */ createPaddedIcon(\n  PhosphorCaretLeftIcon,\n  64,\n  'CaretLeftIcon',\n  true\n);\nexport const CaretRightIcon = /* @__PURE__ */ createPaddedIcon(\n  PhosphorCaretRightIcon,\n  64,\n  'CaretRightIcon',\n  true\n);\nexport const CaretUpIcon = /* @__PURE__ */ createPaddedIcon(\n  PhosphorCaretUpIcon,\n  64,\n  'CaretUpIcon',\n  true\n);\nexport const CheckIcon = /* @__PURE__ */ createPaddedIcon(\n  PhosphorCheckIcon,\n  32,\n  'CheckIcon'\n);\nexport const DotsSixVerticalIcon = /* @__PURE__ */ createPaddedIcon(\n  PhosphorDotsSixVerticalIcon,\n  48,\n  'DotsSixVerticalIcon'\n);\nexport const MinusIcon = /* @__PURE__ */ createPaddedIcon(\n  PhosphorMinusIcon,\n  40,\n  'MinusIcon'\n);\nexport const PlusIcon = /* @__PURE__ */ createPaddedIcon(\n  PhosphorPlusIcon,\n  40,\n  'PlusIcon'\n);\nexport const XCloseIcon = /* @__PURE__ */ createPaddedIcon(\n  PhosphorXIcon,\n  40,\n  'XCloseIcon',\n  true\n);\nexport const XIcon = /* @__PURE__ */ createPaddedIcon(\n  PhosphorXIcon,\n  64,\n  'XIcon',\n  true\n);\n"],"mappings":";;;;;;;;;;;;;;;;;AAkBA,IAAM,oBACJ,eACA,OACA,aACA,YAAY,UACM;CAClB,MAAM,UAAU,GAAG,CAAC,MAAM,GAAG,CAAC,MAAM,GAAG,MAAM,QAAQ,EAAE,GAAG,MAAM,QAAQ;CACxE,MAAM,cAA6B,EACjC,OACA,QACA,aACA,eACA,gBACA,QACA,GAAG,YACC;EACJ,MAAM,iBAAiB,aAAa,WAAW;EAC/C,OACE,oBAAC,eAAD;GACE,GAAI;GACG;GACP,QACE,WAAW,iBAAiB,SAAS,iBAAiB,KAAA;GAExD,aAAa,gBAAgB,iBAAiB,IAAI,KAAA;GAClD,eAAe,kBAAkB,iBAAiB,UAAU,KAAA;GAC5D,gBACE,mBAAmB,iBAAiB,UAAU,KAAA;GAExC;GACC;EACV,CAAA;CAEL;CAEA,WAAW,cAAc;CACzB,OAAO;AACT;AAKA,IAAa,gBAAgC,iCAC3C,iBACA,IACA,eACF;AACA,IAAa,gBAAgC,iCAC3C,iBACA,IACA,eACF;AACA,IAAa,iBAAiC,iCAC5C,kBACA,IACA,gBACF;AACA,IAAa,cAA8B,iCACzC,eACA,IACA,aACF;AACA,IAAa,uBAAuC,iCAClD,wBACA,IACA,wBACA,IACF;AACA,IAAa,sBAAsC,iCACjD,uBACA,IACA,uBACA,IACF;AACA,IAAa,gBAAgC,iCAC3C,iBACA,IACA,iBACA,IACF;AACA,IAAa,gBAAgC,iCAC3C,iBACA,IACA,iBACA,IACF;AACA,IAAa,iBAAiC,iCAC5C,kBACA,IACA,kBACA,IACF;AACA,IAAa,cAA8B,iCACzC,eACA,IACA,eACA,IACF;AACA,IAAa,YAA4B,iCACvC,aACA,IACA,WACF;AACA,IAAa,sBAAsC,iCACjD,uBACA,IACA,qBACF;AACA,IAAa,YAA4B,iCACvC,aACA,IACA,WACF;AACA,IAAa,WAA2B,iCACtC,YACA,IACA,UACF;AACA,IAAa,aAA6B,iCACxC,SACA,IACA,cACA,IACF;AACA,IAAa,QAAwB,iCACnC,SACA,IACA,SACA,IACF"}
+{"version":3,"file":"PaddedPhosphorIcons.js","names":[],"sources":["../../src/icons/PaddedPhosphorIcons.tsx"],"sourcesContent":["import { ArrowDownIcon as PhosphorArrowDownIcon } from '@phosphor-icons/react/dist/ssr/ArrowDown';\nimport { ArrowLeftIcon as PhosphorArrowLeftIcon } from '@phosphor-icons/react/dist/ssr/ArrowLeft';\nimport { ArrowRightIcon as PhosphorArrowRightIcon } from '@phosphor-icons/react/dist/ssr/ArrowRight';\nimport { ArrowUpIcon as PhosphorArrowUpIcon } from '@phosphor-icons/react/dist/ssr/ArrowUp';\nimport { CaretDoubleLeftIcon as PhosphorCaretDoubleLeftIcon } from '@phosphor-icons/react/dist/ssr/CaretDoubleLeft';\nimport { CaretDoubleRightIcon as PhosphorCaretDoubleRightIcon } from '@phosphor-icons/react/dist/ssr/CaretDoubleRight';\nimport { CaretDownIcon as PhosphorCaretDownIcon } from '@phosphor-icons/react/dist/ssr/CaretDown';\nimport { CaretLeftIcon as PhosphorCaretLeftIcon } from '@phosphor-icons/react/dist/ssr/CaretLeft';\nimport { CaretRightIcon as PhosphorCaretRightIcon } from '@phosphor-icons/react/dist/ssr/CaretRight';\nimport { CaretUpIcon as PhosphorCaretUpIcon } from '@phosphor-icons/react/dist/ssr/CaretUp';\nimport { CaretUpDownIcon as PhosphorCaretUpDownIcon } from '@phosphor-icons/react/dist/ssr/CaretUpDown';\nimport { CheckIcon as PhosphorCheckIcon } from '@phosphor-icons/react/dist/ssr/Check';\nimport { DotsSixVerticalIcon as PhosphorDotsSixVerticalIcon } from '@phosphor-icons/react/dist/ssr/DotsSixVertical';\nimport { MinusIcon as PhosphorMinusIcon } from '@phosphor-icons/react/dist/ssr/Minus';\nimport { PlusIcon as PhosphorPlusIcon } from '@phosphor-icons/react/dist/ssr/Plus';\nimport { XIcon as PhosphorXIcon } from '@phosphor-icons/react/dist/ssr/X';\n\nimport type { IconComponent } from '../utils/icon-types';\n\nconst createPaddedIcon = (\n  IconComponent: IconComponent,\n  inset: number,\n  displayName: string,\n  extraBold = false\n): IconComponent => {\n  const viewBox = `${-inset} ${-inset} ${256 + inset * 2} ${256 + inset * 2}`;\n  const PaddedIcon: IconComponent = ({\n    color,\n    stroke,\n    strokeWidth,\n    strokeLinecap,\n    strokeLinejoin,\n    weight,\n    ...props\n  }) => {\n    const applyExtraBold = extraBold && weight === 'bold';\n    return (\n      <IconComponent\n        {...props}\n        color={color}\n        stroke={\n          stroke ?? (applyExtraBold ? color || 'currentColor' : undefined)\n        }\n        strokeWidth={strokeWidth ?? (applyExtraBold ? 8 : undefined)}\n        strokeLinecap={strokeLinecap ?? (applyExtraBold ? 'round' : undefined)}\n        strokeLinejoin={\n          strokeLinejoin ?? (applyExtraBold ? 'round' : undefined)\n        }\n        weight={weight}\n        viewBox={viewBox}\n      />\n    );\n  };\n\n  PaddedIcon.displayName = displayName;\n  return PaddedIcon;\n};\n\n// These compact glyphs fill more of Phosphor's canvas than their Untitled UI\n// counterparts. Expanded viewBoxes preserve the outer size while restoring the\n// previous optical footprint.\nexport const ArrowDownIcon = /* @__PURE__ */ createPaddedIcon(\n  PhosphorArrowDownIcon,\n  32,\n  'ArrowDownIcon'\n);\nexport const ArrowLeftIcon = /* @__PURE__ */ createPaddedIcon(\n  PhosphorArrowLeftIcon,\n  32,\n  'ArrowLeftIcon'\n);\nexport const ArrowRightIcon = /* @__PURE__ */ createPaddedIcon(\n  PhosphorArrowRightIcon,\n  32,\n  'ArrowRightIcon'\n);\nexport const ArrowUpIcon = /* @__PURE__ */ createPaddedIcon(\n  PhosphorArrowUpIcon,\n  32,\n  'ArrowUpIcon'\n);\nexport const CaretDoubleRightIcon = /* @__PURE__ */ createPaddedIcon(\n  PhosphorCaretDoubleRightIcon,\n  64,\n  'CaretDoubleRightIcon',\n  true\n);\nexport const CaretDoubleLeftIcon = /* @__PURE__ */ createPaddedIcon(\n  PhosphorCaretDoubleLeftIcon,\n  64,\n  'CaretDoubleLeftIcon',\n  true\n);\nexport const CaretDownIcon = /* @__PURE__ */ createPaddedIcon(\n  PhosphorCaretDownIcon,\n  64,\n  'CaretDownIcon',\n  true\n);\nexport const CaretUpDownIcon = /* @__PURE__ */ createPaddedIcon(\n  PhosphorCaretUpDownIcon,\n  64,\n  'CaretUpDownIcon',\n  true\n);\nexport const CaretLeftIcon = /* @__PURE__ */ createPaddedIcon(\n  PhosphorCaretLeftIcon,\n  64,\n  'CaretLeftIcon',\n  true\n);\nexport const CaretRightIcon = /* @__PURE__ */ createPaddedIcon(\n  PhosphorCaretRightIcon,\n  64,\n  'CaretRightIcon',\n  true\n);\nexport const CaretUpIcon = /* @__PURE__ */ createPaddedIcon(\n  PhosphorCaretUpIcon,\n  64,\n  'CaretUpIcon',\n  true\n);\nexport const CheckIcon = /* @__PURE__ */ createPaddedIcon(\n  PhosphorCheckIcon,\n  32,\n  'CheckIcon'\n);\nexport const DotsSixVerticalIcon = /* @__PURE__ */ createPaddedIcon(\n  PhosphorDotsSixVerticalIcon,\n  48,\n  'DotsSixVerticalIcon'\n);\nexport const MinusIcon = /* @__PURE__ */ createPaddedIcon(\n  PhosphorMinusIcon,\n  40,\n  'MinusIcon'\n);\nexport const PlusIcon = /* @__PURE__ */ createPaddedIcon(\n  PhosphorPlusIcon,\n  40,\n  'PlusIcon'\n);\nexport const XCloseIcon = /* @__PURE__ */ createPaddedIcon(\n  PhosphorXIcon,\n  40,\n  'XCloseIcon',\n  true\n);\nexport const XIcon = /* @__PURE__ */ createPaddedIcon(\n  PhosphorXIcon,\n  64,\n  'XIcon',\n  true\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;AAmBA,IAAM,oBACJ,eACA,OACA,aACA,YAAY,UACM;CAClB,MAAM,UAAU,GAAG,CAAC,MAAM,GAAG,CAAC,MAAM,GAAG,MAAM,QAAQ,EAAE,GAAG,MAAM,QAAQ;CACxE,MAAM,cAA6B,EACjC,OACA,QACA,aACA,eACA,gBACA,QACA,GAAG,YACC;EACJ,MAAM,iBAAiB,aAAa,WAAW;EAC/C,OACE,oBAAC,eAAD;GACE,GAAI;GACG;GACP,QACE,WAAW,iBAAiB,SAAS,iBAAiB,KAAA;GAExD,aAAa,gBAAgB,iBAAiB,IAAI,KAAA;GAClD,eAAe,kBAAkB,iBAAiB,UAAU,KAAA;GAC5D,gBACE,mBAAmB,iBAAiB,UAAU,KAAA;GAExC;GACC;EACV,CAAA;CAEL;CAEA,WAAW,cAAc;CACzB,OAAO;AACT;AAKA,IAAa,gBAAgC,iCAC3C,iBACA,IACA,eACF;AACA,IAAa,gBAAgC,iCAC3C,iBACA,IACA,eACF;AACA,IAAa,iBAAiC,iCAC5C,kBACA,IACA,gBACF;AACA,IAAa,cAA8B,iCACzC,eACA,IACA,aACF;AACA,IAAa,uBAAuC,iCAClD,wBACA,IACA,wBACA,IACF;AACA,IAAa,sBAAsC,iCACjD,uBACA,IACA,uBACA,IACF;AACA,IAAa,gBAAgC,iCAC3C,iBACA,IACA,iBACA,IACF;AACA,IAAa,kBAAkC,iCAC7C,mBACA,IACA,mBACA,IACF;AACA,IAAa,gBAAgC,iCAC3C,iBACA,IACA,iBACA,IACF;AACA,IAAa,iBAAiC,iCAC5C,kBACA,IACA,kBACA,IACF;AACA,IAAa,cAA8B,iCACzC,eACA,IACA,eACA,IACF;AACA,IAAa,YAA4B,iCACvC,aACA,IACA,WACF;AACA,IAAa,sBAAsC,iCACjD,uBACA,IACA,qBACF;AACA,IAAa,YAA4B,iCACvC,aACA,IACA,WACF;AACA,IAAa,WAA2B,iCACtC,YACA,IACA,UACF;AACA,IAAa,aAA6B,iCACxC,SACA,IACA,cACA,IACF;AACA,IAAa,QAAwB,iCACnC,SACA,IACA,SACA,IACF"}

package/dist/icons/WeightedPhosphorIcons.d.ts

@@ -13,6 +13,7 @@ export declare const LinkBreakRegularIcon: IconComponent;
 export declare const PencilLineFillIcon: IconComponent;
 export declare const PencilSimpleLineFillIcon: IconComponent;
 export declare const AlarmFillIcon: IconComponent;
+export declare const WrenchFillIcon: IconComponent;
 export declare const ChartBarFillIcon: IconComponent;
 export declare const ChartLineUpRegularIcon: IconComponent;
 export declare const ChatsFillIcon: IconComponent;

package/dist/icons/WeightedPhosphorIcons.js

@@ -6,6 +6,7 @@ import { WarningIcon } from "@phosphor-icons/react/dist/ssr/Warning";
 import { MagnifyingGlassIcon } from "@phosphor-icons/react/dist/ssr/MagnifyingGlass";
 import { SquaresFourIcon } from "@phosphor-icons/react/dist/ssr/SquaresFour";
 import { StarIcon } from "@phosphor-icons/react/dist/ssr/Star";
+import { WrenchIcon } from "@phosphor-icons/react/dist/ssr/Wrench";
 import { AlarmIcon } from "@phosphor-icons/react/dist/ssr/Alarm";
 import { ArticleIcon } from "@phosphor-icons/react/dist/ssr/Article";
 import { ChartBarIcon } from "@phosphor-icons/react/dist/ssr/ChartBar";
@@ -61,6 +62,7 @@ var LinkBreakRegularIcon = /* @__PURE__ */ createWeightedIcon(LinkBreakIcon, "re
 var PencilLineFillIcon = /* @__PURE__ */ createWeightedIcon(PencilLineIcon, "fill", "PencilLineFillIcon");
 var PencilSimpleLineFillIcon = /* @__PURE__ */ createWeightedIcon(PencilSimpleLineIcon, "fill", "PencilSimpleLineFillIcon");
 var AlarmFillIcon = /* @__PURE__ */ createWeightedIcon(AlarmIcon, "fill", "AlarmFillIcon");
+var WrenchFillIcon = /* @__PURE__ */ createWeightedIcon(WrenchIcon, "fill", "WrenchFillIcon");
 var ChartBarFillIcon = /* @__PURE__ */ createWeightedIcon(ChartBarIcon, "fill", "ChartBarFillIcon");
 var ChartLineUpRegularIcon = /* @__PURE__ */ createWeightedIcon(ChartLineUpIcon, "regular", "ChartLineUpRegularIcon");
 var ChatsFillIcon = /* @__PURE__ */ createWeightedIcon(ChatsIcon, "fill", "ChatsFillIcon");
@@ -91,6 +93,6 @@ var SidebarSimpleRightRegularIcon = /* @__PURE__ */ createMirroredWeightedIcon(S
 /** @deprecated Prefer MagnifyingGlassRegularIcon for new UI. */
 var MagnifyingGlassBoldIcon = /* @__PURE__ */ createWeightedIcon(MagnifyingGlassIcon, "bold", "MagnifyingGlassBoldIcon");
 //#endregion
-export { AlarmFillIcon, ArrowDownBoldIcon, ArrowDownRegularIcon, ArrowLeftRegularIcon, ArrowRightRegularIcon, ArrowUpBoldIcon, ArrowUpRegularIcon, ArticleRegularIcon, BinaryRegularIcon, BriefcaseRegularIcon, BuildingsRegularIcon, CarRegularIcon, CaretDoubleRightRegularIcon, CaretDownBoldIcon, CaretDownRegularIcon, CaretLeftRegularIcon, CaretRightRegularIcon, CaretUpDownRegularIcon, CaretUpRegularIcon, ChartBarFillIcon, ChartLineUpRegularIcon, ChatCenteredDotsRegularIcon, ChatsFillIcon, CheckCircleFillIcon, ClockCounterClockwiseRegularIcon, CodepenLogoFillIcon, CodepenLogoRegularIcon, CpuRegularIcon, CubeRegularIcon, CursorFillIcon, DatabaseFillIcon, DivideRegularIcon, EnvelopeFillIcon, EqualsRegularIcon, FileCodeFillIcon, FileMagnifyingGlassRegularIcon, FlagRegularIcon, GearRegularIcon, GearSixFillIcon, GearSixRegularIcon, GlobeRegularIcon, GridFourFillIcon, HourglassFillIcon, ImageRegularIcon, InfinityRegularIcon, InfoFillIcon, InfoRegularIcon, KeyFillIcon, LaptopRegularIcon, LinkBreakRegularIcon, ListBulletsRegularIcon, LockFillIcon, MagnifyingGlassBoldIcon, MagnifyingGlassRegularIcon, MinusRegularIcon, MoonRegularIcon, PackageFillIcon, PackageRegularIcon, PauseFillIcon, PencilLineFillIcon, PencilSimpleLineFillIcon, PlayCircleFillIcon, PlayFillIcon, PushPinRegularIcon, RepeatRegularIcon, ShieldRegularIcon, ShieldStarFillIcon, SidebarSimpleRightRegularIcon, SignOutRegularIcon, SlidersHorizontalRegularIcon, SparkleFillIcon, SquaresFourFillIcon, SquaresFourRegularIcon, StackRegularIcon, StarFillIcon, StarRegularIcon, SunRegularIcon, TagRegularIcon, ToggleLeftRegularIcon, UserFillIcon, WarningFillIcon, WarningOctagonFillIcon, WarningRegularIcon, WrenchRegularIcon };
+export { AlarmFillIcon, ArrowDownBoldIcon, ArrowDownRegularIcon, ArrowLeftRegularIcon, ArrowRightRegularIcon, ArrowUpBoldIcon, ArrowUpRegularIcon, ArticleRegularIcon, BinaryRegularIcon, BriefcaseRegularIcon, BuildingsRegularIcon, CarRegularIcon, CaretDoubleRightRegularIcon, CaretDownBoldIcon, CaretDownRegularIcon, CaretLeftRegularIcon, CaretRightRegularIcon, CaretUpDownRegularIcon, CaretUpRegularIcon, ChartBarFillIcon, ChartLineUpRegularIcon, ChatCenteredDotsRegularIcon, ChatsFillIcon, CheckCircleFillIcon, ClockCounterClockwiseRegularIcon, CodepenLogoFillIcon, CodepenLogoRegularIcon, CpuRegularIcon, CubeRegularIcon, CursorFillIcon, DatabaseFillIcon, DivideRegularIcon, EnvelopeFillIcon, EqualsRegularIcon, FileCodeFillIcon, FileMagnifyingGlassRegularIcon, FlagRegularIcon, GearRegularIcon, GearSixFillIcon, GearSixRegularIcon, GlobeRegularIcon, GridFourFillIcon, HourglassFillIcon, ImageRegularIcon, InfinityRegularIcon, InfoFillIcon, InfoRegularIcon, KeyFillIcon, LaptopRegularIcon, LinkBreakRegularIcon, ListBulletsRegularIcon, LockFillIcon, MagnifyingGlassBoldIcon, MagnifyingGlassRegularIcon, MinusRegularIcon, MoonRegularIcon, PackageFillIcon, PackageRegularIcon, PauseFillIcon, PencilLineFillIcon, PencilSimpleLineFillIcon, PlayCircleFillIcon, PlayFillIcon, PushPinRegularIcon, RepeatRegularIcon, ShieldRegularIcon, ShieldStarFillIcon, SidebarSimpleRightRegularIcon, SignOutRegularIcon, SlidersHorizontalRegularIcon, SparkleFillIcon, SquaresFourFillIcon, SquaresFourRegularIcon, StackRegularIcon, StarFillIcon, StarRegularIcon, SunRegularIcon, TagRegularIcon, ToggleLeftRegularIcon, UserFillIcon, WarningFillIcon, WarningOctagonFillIcon, WarningRegularIcon, WrenchFillIcon, WrenchRegularIcon };
 
 //# sourceMappingURL=WeightedPhosphorIcons.js.map