@nurix/ui-component-library 1.1.4-stage.122 → 1.1.4-stage.124

package/dist/index.d.mts

@@ -307,6 +307,76 @@ interface SwitchProps {
 
 declare const Switch: React$1.ForwardRefExoticComponent<SwitchProps & React$1.RefAttributes<HTMLButtonElement>>;
 
+interface SliderProps {
+    /**
+     * Controlled value. Single-thumb slider — pass a single number.
+     */
+    value?: number;
+    /**
+     * Uncontrolled initial value.
+     * @default min
+     */
+    defaultValue?: number;
+    /**
+     * Called whenever the value changes (during drag and on commit).
+     */
+    onValueChange?: (value: number) => void;
+    /**
+     * Called when the user finishes interacting (pointer up / blur).
+     */
+    onValueCommit?: (value: number) => void;
+    /**
+     * Minimum allowed value.
+     * @default 0
+     */
+    min?: number;
+    /**
+     * Maximum allowed value.
+     * @default 100
+     */
+    max?: number;
+    /**
+     * Step granularity.
+     * @default 1
+     */
+    step?: number;
+    disabled?: boolean;
+    /**
+     * Label shown at the left edge (under the min end of the track).
+     * The label row renders automatically when either `minLabel` or
+     * `maxLabel` is provided.
+     */
+    minLabel?: React$1.ReactNode;
+    /**
+     * Label shown at the right edge (under the max end of the track).
+     * The label row renders automatically when either `minLabel` or
+     * `maxLabel` is provided.
+     */
+    maxLabel?: React$1.ReactNode;
+    /**
+     * Accessible name for the thumb.
+     */
+    "aria-label"?: string;
+    /**
+     * Optional id forwarded to the underlying root element.
+     */
+    id?: string;
+    className?: string;
+    style?: React$1.CSSProperties;
+    /**
+     * Optional `data-testid` for Playwright. Defaults to `"slider"` if omitted.
+     * By convention pass a descriptive name like `"slider-temperature"`.
+     */
+    "data-testid"?: string;
+}
+
+/**
+ * Slider — single-thumb range input with optional min/max edge labels.
+ *
+ * Figma reference: 557:22788, 557:23017.
+ */
+declare const Slider: React$1.ForwardRefExoticComponent<SliderProps & React$1.RefAttributes<HTMLSpanElement>>;
+
 /**
  * Toggle (segmented pill / card) — Figma references:
  *   - 4960:33812 — IconToggleSetRegular (size = "regular", 36×36 pills)
@@ -556,17 +626,44 @@ interface AccordionProps<TType extends AccordionType = "single"> extends Omit<Re
 interface AccordionItemProps extends React$1.HTMLAttributes<HTMLDivElement> {
     value: string;
     disabled?: boolean;
+    /**
+     * Visual variant for the item.
+     * - `"default"` (back-compat) — flat row with a bottom divider; used in
+     *   long lists where items share a single border baseline.
+     * - `"card"` — bordered, rounded, drop-shadowed pill that reads as its own
+     *   surface (Figma 707:17455 / 6441:22282). Use when each item is a
+     *   self-contained section, e.g. a Speech Settings card.
+     * @default "default"
+     */
+    variant?: "default" | "card";
 }
+type AccordionTriggerSize = "default" | "sm";
 interface AccordionTriggerProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
     /**
      * Optional description under the label (matches Figma).
      */
     description?: React$1.ReactNode;
     /**
-     * Optional right-side action (e.g. "Add" button).
+     * Optional right-side action (e.g. "Add" button, Switch toggle).
      * Note: click events are stopped from toggling the accordion.
      */
     action?: React$1.ReactNode;
+    /**
+     * Hide the trailing chevron. Useful for a card whose header is purely a
+     * toggle (e.g. `action` is a `Switch`) — when off, there's no body to
+     * expand, so a chevron would be misleading.
+     * @default false
+     */
+    hideChevron?: boolean;
+    /**
+     * Trigger sizing.
+     * - `"default"` — `py-4`, title is `text-lg` (legacy long-list look).
+     * - `"sm"`     — `p-3`, title is `text-sm font-semibold` (Heading/H5);
+     *               pairs with `AccordionItem variant="card"` per Figma
+     *               707:17455.
+     * @default "default"
+     */
+    size?: AccordionTriggerSize;
     /**
      * Optional `data-testid` for Playwright. Defaults to `"accordion"` if omitted.
      */
@@ -839,6 +936,11 @@ interface SelectContentItem {
     subtext?: string;
     leadIcon?: React$1.ReactNode;
     leadIconSize?: "xs" | "sm" | "md";
+    /**
+     * Optional trailing content rendered between the label/subtext and the
+     * checkmark — typically used for tag badges, status pills, or counts.
+     */
+    trailing?: React$1.ReactNode;
 }
 /** Section with items when using SelectContent `items` prop. */
 interface SelectContentItemWithSection {
@@ -850,14 +952,20 @@ declare const Select: React$1.FC<SelectPrimitive.SelectProps>;
 declare const SelectGroup: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectGroupProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 /**
  * Select value text (placeholder/value) using Typography tokens.
- * We style placeholder color via `group-data-[placeholder]` on the trigger.
+ *
+ * Radix's `SelectPrimitive.Value` destructures `className` and `style` out of
+ * its props and never forwards them to the rendered span (see
+ * @radix-ui/react-select source) — so styling MUST live on a wrapper around
+ * it, not on the primitive itself. We wrap with a `<span>` that carries the
+ * truncation rules so long selected values ellipsize within the trigger
+ * instead of bleeding past the chevron / pushing siblings off the row.
  */
 declare const SelectValue: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectValueProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
 declare const SelectTrigger: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & {
     showLead?: boolean;
     leadIcon?: React$1.ReactNode;
-    /** Size of lead icon. "xs" = 16px, "sm" = 24px (default) */
-    leadIconSize?: "xs" | "sm";
+    /** Size of lead icon wrapper. "xs" = 12px, "sm" = 16px (default), "md" = 20px */
+    leadIconSize?: "xs" | "sm" | "md";
     /** Size variant. "small" = 32px height, "regular" = 48px, "large" = 64px */
     size?: "small" | "regular" | "large";
     /** Background variant. "default" = input grey, "white" = card white */
@@ -875,6 +983,14 @@ declare const SelectContent: React$1.ForwardRefExoticComponent<Omit<SelectPrimit
     items?: SelectContentItem[] | SelectContentItemWithSection[];
     showSearch?: boolean;
     searchPlaceholder?: string;
+    /**
+     * Ref forwarded to the internal `SelectPrimitive.Viewport` (the scroll
+     * container for items). Lets consumers attach an `IntersectionObserver`
+     * — typical use is wiring an `InfiniteScroll` so items lazy-load as the
+     * user scrolls a long list (e.g. paginated transfer agents). Function
+     * refs are also supported.
+     */
+    viewportRef?: React$1.Ref<HTMLDivElement> | ((node: HTMLDivElement | null) => void);
 } & React$1.RefAttributes<HTMLDivElement>>;
 declare const SelectLabel: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const SelectItem: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
@@ -883,6 +999,11 @@ declare const SelectItem: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive
     leadIcon?: React$1.ReactNode;
     /** Size of leadIcon area. "xs" = 16px, "sm" = 24px, "md" = 36px (for playback controls) */
     leadIconSize?: "xs" | "sm" | "md";
+    /**
+     * Optional trailing content rendered between the label/subtext and the
+     * checkmark — typically used for tag badges, status pills, or counts.
+     */
+    trailing?: React$1.ReactNode;
     /**
      * Optional `data-testid` for Playwright. Defaults to `"select-item"` if omitted.
      */
@@ -895,13 +1016,26 @@ interface PlaySelectAudioItem {
     value: string;
     label: string;
     subtext?: string;
+    /**
+     * Audio preview URL. When empty/falsy, the play button is rendered in a
+     * disabled visual state and clicks are no-ops — no playback state change.
+     */
     url: string;
+    /**
+     * Optional trailing content rendered between the label and the checkmark.
+     * Typically used for tag badges (e.g. gender, language pills).
+     */
+    tags?: React$1.ReactNode;
 }
 interface PlaySelectProps {
     /** List of audio items to display. Each has value, label, subtext, and playable url. */
     dropdownListItems: PlaySelectAudioItem[];
     /** Trigger label (e.g. "Title") */
     label?: string;
+    /** Whether to show the form label above the trigger. @default true */
+    showLabel?: boolean;
+    /** Whether the label shows the red `*` mandatory indicator. @default true */
+    mandatory?: boolean;
     /** Placeholder when nothing selected */
     placeholder?: string;
     /** Show search input in dropdown */
@@ -928,6 +1062,10 @@ interface PlaySelectProps {
     triggerLeadIcon?: React$1.ReactNode;
     /** Optional wrapper className (e.g. to control width) */
     className?: string;
+    /** Optional className passed to the SelectTrigger button */
+    triggerClassName?: string;
+    /** Optional className passed to the SelectContent dropdown panel */
+    contentClassName?: string;
     /** Minimum width (e.g. "196px"). Override via className if needed. */
     minWidth?: string;
 }
@@ -2012,6 +2150,18 @@ interface StepItem {
      * @default "incomplete"
      */
     state?: StepState;
+    /**
+     * Optional click handler. When provided, the step renders as a `<button>`
+     * (rather than a static `<div>`) so consumers can use the stepper as
+     * navigation — e.g. clicking a completed step jumps the wizard back to it.
+     */
+    onClick?: (event: React$1.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Disable click navigation even when `onClick` is provided. Useful for the
+     * currently active step or steps that aren't reachable from the current
+     * position.
+     */
+    disabled?: boolean;
 }
 interface StepperProps {
     /**
@@ -2925,6 +3075,25 @@ interface KeyValueEditorProps {
      * matches the Figma reference.
      */
     valueLeadingIcon?: React$1.ReactNode;
+    /**
+     * Render an extra cell at the end of every row, between the value field
+     * and the delete button. Use it for per-row controls that don't fit the
+     * key/value contract (e.g. a `Toggle` for a third boolean field).
+     *
+     * `pair` is the current pair, `index` is the row index. Return `null` /
+     * `undefined` to render nothing for that row. The trailing slot is
+     * absent from the header — pass a `header` label string to render a
+     * matching column header, otherwise the spot stays empty.
+     *
+     * Backwards-compatible: omit both props and the editor renders the
+     * legacy 2-column layout.
+     */
+    renderRowTrailing?: (pair: KeyValuePair, index: number) => React$1.ReactNode;
+    /**
+     * Header label for the trailing column. Only rendered when
+     * `renderRowTrailing` is also set and `hideHeader` is false.
+     */
+    trailingHeader?: string;
     className?: string;
     style?: React$1.CSSProperties;
     /**
@@ -3130,4 +3299,107 @@ interface PopoverProps {
  */
 declare const Popover: React$1.ForwardRefExoticComponent<PopoverProps & React$1.RefAttributes<HTMLDivElement>>;
 
-export { Accordion, AccordionContent, AccordionContentPlaceholder, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionSectionTrigger, type AccordionSectionTriggerProps, AccordionTrigger, type AccordionTriggerProps, type AccordionType, type AccordionValue, AudioPlayer, type AudioPlayerProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarShape, type AvatarSize, type BackButtonPosition, Badge, type BadgeProps, type BadgeVariant, Button, type ButtonBorderRadius, ButtonList, type ButtonListItem, type ButtonListProps, type ButtonProps, type ButtonSize, type ButtonVariant, type CellContent, type CellTextContent, ChatBubbleAgent, type ChatBubbleAgentProps, ChatBubbleUser, type ChatBubbleUserProps, Checkbox, type CheckboxProps, type ColumnDef, ColumnWidth, CompoundFilterSelect, type CompoundFilterSelectProps, type CompoundFilterToggleOption, DEFAULT_THEME, DataTable, type DataTableProps, type DatePreset, Dialog, DialogBody, type DialogBodyProps, DialogFooter, type DialogFooterProps, DialogHeader, DialogHeaderNavigation, type DialogHeaderNavigationProps, type DialogHeaderNavigationVariant, type DialogHeaderProps, DialogIcon, type DialogIconProps, type DialogProps, type DialogSize, type DialogType, EmptyState, type EmptyStateIllustrationPosition, type EmptyStateIllustrationSize, type EmptyStateProps, FileInput, type FileInputProps, type FilterItem, type FilterItemWithSection, FilterListItem, type FilterListItemProps, FilterSelect, type FilterSelectProps, type IconColor, IconPicker, type IconPickerProps, type IconSize, IconWrapper, type IconWrapperProps, Input, type InputBorderRadius, type InputForceState, InputGroup, type InputGroupBorderRadius, type InputGroupForceState, type InputGroupProps, type InputProps, type InputVariant, JSON_EDITOR_LANGUAGE_OPTIONS, JsonEditor, type JsonEditorLanguage, type JsonEditorProps, KeyValueEditor, type KeyValueEditorProps, type KeyValuePair, LegoLandWrapper, type LegoLandWrapperProps, List, type ListBorderRadius, type ListNavItemProps, ListNavigation, type ListNavigationProps, type ListProps, type ListType, type ListVariant, MONACO_OPTIONS, MONACO_OPTIONS_DIALOG, NestedButtonGroup, type NestedButtonGroupProps, NumberBadge, type NumberBadgeProps, type NumberBadgeVariant, NurixThemeProvider, Pagination, type PaginationProps, PlaySelect, type PlaySelectAudioItem, type PlaySelectProps, PlaybackControl, type PlaybackControlProps, type PlaybackState, Popover, type PopoverAlign, type PopoverProps, type PopoverShadow, type PopoverSide, ProgressBar, type ProgressBarProps, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, Select, SelectContent, type SelectContentItem, SelectFormLabel, SelectGroup, type SelectGroupProps, SelectItem, SelectLabel, type SelectLabelProps, type SelectMenuItemProps, type SelectProps, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, ShadowDOMWrapper, type ShowToastOptions, SidePanel, type SidePanelProps, type SidePanelSize, type SortDirection, type SortState, Spinner, type SpinnerProps, type SpinnerSize, type StepItem, type StepState, Stepper, StepperBar, type StepperBarProps, type StepperProps, type SupportingTextType, Surface, type SurfaceBackground, SurfaceBody, type SurfaceBodyProps, SurfaceFooter, type SurfaceFooterProps, SurfaceHeader, type SurfaceHeaderProps, type SurfaceProps, Switch, type SwitchProps, type SwitchSize, type TabVariant, type TableAction, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, TagBadge, type TagBadgeProps, type TagOption, Textarea, type TextareaBorderRadius, type TextareaForceState, type TextareaProps, ThemeProvider, Toast, type ToastProps, type ToastVariant, Toaster, Toggle, ToggleItem, type ToggleItemProps, type ToggleProps, type ToggleType, Tooltip, TooltipContent, type TooltipContentProps, TooltipProvider, TooltipTrigger, Typography, type TypographyProps, type TypographySize, type TypographyTone, type TypographyVariant, type TypographyWeight, type UsePlaySelectProps, type UseSelectProps, enhanceJsonError, showToast, useJsonEditor, usePlaySelect, useSelect, useTheme };
+/**
+ * Plain item shape for `MultiSelect`. Mirrors the minimal subset of
+ * `SelectContentItem` that's actually meaningful for a checkbox list — no
+ * leadIcon / subtext / trailing slots.
+ */
+interface MultiSelectItem<T extends string = string> {
+    value: T;
+    label: string;
+    /** Optional: disable a single item. */
+    disabled?: boolean;
+}
+interface MultiSelectProps<T extends string = string> {
+    /**
+     * Selected values (controlled).
+     */
+    value: T[];
+    /**
+     * Called whenever the selection changes.
+     */
+    onValueChange: (values: T[]) => void;
+    /**
+     * Items to render inside the dropdown.
+     */
+    items: MultiSelectItem<T>[];
+    /**
+     * Placeholder shown in the trigger when nothing is selected.
+     * @default "Select…"
+     */
+    placeholder?: string;
+    /**
+     * Optional label rendered on the left of the trigger before a vertical
+     * separator and the selected-items summary — mirrors `FilterSelect`'s
+     * "Label | selected1, selected2 +N" layout. Use this when the field's
+     * external label is also part of the trigger (e.g. compact rows where
+     * the form-level label is omitted).
+     */
+    label?: string;
+    /**
+     * Render a search input above the list.
+     * @default false
+     */
+    showSearch?: boolean;
+    /**
+     * Placeholder for the search input.
+     * @default "Search…"
+     */
+    searchPlaceholder?: string;
+    /**
+     * Render a "(Select All)" toggle row above the items.
+     * @default true
+     */
+    showSelectAll?: boolean;
+    /**
+     * Size variant. Same vocabulary as `SelectTrigger.size` so a paired
+     * single-select and multi-select stay visually aligned.
+     * @default "regular"
+     */
+    size?: "small" | "regular" | "large";
+    /**
+     * Background variant. Same vocabulary as `SelectTrigger.bg`.
+     * @default "default"
+     */
+    bg?: "default" | "white";
+    /**
+     * Disable the entire control.
+     */
+    disabled?: boolean;
+    /**
+     * Max height for the items list. Content scrolls beyond this.
+     * @default 260
+     */
+    maxHeight?: number | string;
+    /**
+     * id for the trigger button.
+     */
+    id?: string;
+    /**
+     * Optional className applied to the trigger button.
+     */
+    className?: string;
+    /**
+     * Optional `data-testid` for Playwright. Defaults to `"multi-select"`.
+     */
+    "data-testid"?: string;
+}
+
+/**
+ * MultiSelect — checkbox-list dropdown styled to match `Select`.
+ *
+ * Why this exists separately from `Select`: Radix Select is fundamentally
+ * single-select (it commits + closes on each pick). MultiSelect is built on
+ * `Popover` + `Checkbox` so the dropdown stays open while the user picks
+ * multiple items — but its trigger reuses `SELECT_TOKENS.container.*` so
+ * the height, border, chevron, and spacing match a sibling `Select` pixel-
+ * for-pixel.
+ *
+ * Behaviour mirrors FilterSelect's `type="list"` (search + Select-All +
+ * checkboxes), but the trigger is a form-field Select trigger rather than
+ * a filter pill — so it slots into form layouts next to a normal Select
+ * without visual drift.
+ */
+declare function MultiSelect<T extends string = string>({ value, onValueChange, items, placeholder, label, showSearch, searchPlaceholder, showSelectAll, size, bg, disabled, maxHeight, id, className, "data-testid": dataTestId, }: MultiSelectProps<T>): react_jsx_runtime.JSX.Element;
+
+export { Accordion, AccordionContent, AccordionContentPlaceholder, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionSectionTrigger, type AccordionSectionTriggerProps, AccordionTrigger, type AccordionTriggerProps, type AccordionType, type AccordionValue, AudioPlayer, type AudioPlayerProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarShape, type AvatarSize, type BackButtonPosition, Badge, type BadgeProps, type BadgeVariant, Button, type ButtonBorderRadius, ButtonList, type ButtonListItem, type ButtonListProps, type ButtonProps, type ButtonSize, type ButtonVariant, type CellContent, type CellTextContent, ChatBubbleAgent, type ChatBubbleAgentProps, ChatBubbleUser, type ChatBubbleUserProps, Checkbox, type CheckboxProps, type ColumnDef, ColumnWidth, CompoundFilterSelect, type CompoundFilterSelectProps, type CompoundFilterToggleOption, DEFAULT_THEME, DataTable, type DataTableProps, type DatePreset, Dialog, DialogBody, type DialogBodyProps, DialogFooter, type DialogFooterProps, DialogHeader, DialogHeaderNavigation, type DialogHeaderNavigationProps, type DialogHeaderNavigationVariant, type DialogHeaderProps, DialogIcon, type DialogIconProps, type DialogProps, type DialogSize, type DialogType, EmptyState, type EmptyStateIllustrationPosition, type EmptyStateIllustrationSize, type EmptyStateProps, FileInput, type FileInputProps, type FilterItem, type FilterItemWithSection, FilterListItem, type FilterListItemProps, FilterSelect, type FilterSelectProps, type IconColor, IconPicker, type IconPickerProps, type IconSize, IconWrapper, type IconWrapperProps, Input, type InputBorderRadius, type InputForceState, InputGroup, type InputGroupBorderRadius, type InputGroupForceState, type InputGroupProps, type InputProps, type InputVariant, JSON_EDITOR_LANGUAGE_OPTIONS, JsonEditor, type JsonEditorLanguage, type JsonEditorProps, KeyValueEditor, type KeyValueEditorProps, type KeyValuePair, LegoLandWrapper, type LegoLandWrapperProps, List, type ListBorderRadius, type ListNavItemProps, ListNavigation, type ListNavigationProps, type ListProps, type ListType, type ListVariant, MONACO_OPTIONS, MONACO_OPTIONS_DIALOG, MultiSelect, type MultiSelectItem, type MultiSelectProps, NestedButtonGroup, type NestedButtonGroupProps, NumberBadge, type NumberBadgeProps, type NumberBadgeVariant, NurixThemeProvider, Pagination, type PaginationProps, PlaySelect, type PlaySelectAudioItem, type PlaySelectProps, PlaybackControl, type PlaybackControlProps, type PlaybackState, Popover, type PopoverAlign, type PopoverProps, type PopoverShadow, type PopoverSide, ProgressBar, type ProgressBarProps, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, Select, SelectContent, type SelectContentItem, SelectFormLabel, SelectGroup, type SelectGroupProps, SelectItem, SelectLabel, type SelectLabelProps, type SelectMenuItemProps, type SelectProps, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, ShadowDOMWrapper, type ShowToastOptions, SidePanel, type SidePanelProps, type SidePanelSize, Slider, type SliderProps, type SortDirection, type SortState, Spinner, type SpinnerProps, type SpinnerSize, type StepItem, type StepState, Stepper, StepperBar, type StepperBarProps, type StepperProps, type SupportingTextType, Surface, type SurfaceBackground, SurfaceBody, type SurfaceBodyProps, SurfaceFooter, type SurfaceFooterProps, SurfaceHeader, type SurfaceHeaderProps, type SurfaceProps, Switch, type SwitchProps, type SwitchSize, type TabVariant, type TableAction, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, TagBadge, type TagBadgeProps, type TagOption, Textarea, type TextareaBorderRadius, type TextareaForceState, type TextareaProps, ThemeProvider, Toast, type ToastProps, type ToastVariant, Toaster, Toggle, ToggleItem, type ToggleItemProps, type ToggleProps, type ToggleType, Tooltip, TooltipContent, type TooltipContentProps, TooltipProvider, TooltipTrigger, Typography, type TypographyProps, type TypographySize, type TypographyTone, type TypographyVariant, type TypographyWeight, type UsePlaySelectProps, type UseSelectProps, enhanceJsonError, showToast, useJsonEditor, usePlaySelect, useSelect, useTheme };