@raystack/apsara 0.56.7 → 1.0.0-rc.1

package/dist/components/select/select-root.js

@@ -1,8 +1,7 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { ComboboxProvider } from '@ariakit/react';
-import { Select } from 'radix-ui';
-import { createContext, useContext, useState, useId, useRef, useCallback, useMemo } from 'react';
+import { Combobox, Select } from '@base-ui/react';
+import { createContext, useState, useCallback, useMemo, useContext } from 'react';
 
 /*
 Root context to manage the Select control
@@ -22,92 +21,79 @@ const useSelectContext = () => {
         shouldFilter
     };
 };
-const SELECT_INTERNAL_VALUE = 'SELECT_INTERNAL_VALUE';
 const SelectRoot = (props) => {
-    const { children, value: providedValue, onValueChange, defaultValue, autocomplete, autocompleteMode = 'auto', searchValue: providedSearchValue, onSearch, defaultSearchValue = '', open: providedOpen, defaultOpen = false, onOpenChange, htmlAutoComplete, multiple = false, ...rest } = props;
+    const { children, value: providedValue, onValueChange, defaultValue, autocomplete, autocompleteMode = 'auto', searchValue: providedSearchValue, onSearch, defaultSearchValue = '', open: providedOpen, defaultOpen = false, onOpenChange, multiple = false, disabled, required, name, items: itemsProp, ...rest } = props;
     const [internalValue, setInternalValue] = useState(defaultValue);
     const [internalSearchValue, setInternalSearchValue] = useState(defaultSearchValue);
-    const [internalOpen, setInternalOpen] = useState(defaultOpen);
-    const [items, setItems] = useState({});
-    const id = useId();
-    const isSelectionInProgress = useRef(false);
+    const [registeredItems, setRegisteredItems] = useState({});
     const computedValue = providedValue ?? internalValue;
     const searchValue = providedSearchValue ?? internalSearchValue;
-    const open = providedOpen ?? internalOpen;
-    const updateSelectionInProgress = useCallback((value) => {
-        isSelectionInProgress.current = value;
-    }, []);
-    const setValue = useCallback((value) => {
-        /*
-         * If the select is placed inside a form, onChange is called with an empty value
-         * WORKAROUND FOR ISSUE https://github.com/radix-ui/primitives/issues/3135
-         */
-        if (value === '')
-            return;
+    const handleValueChange = useCallback((value, _eventDetails) => {
+        setInternalValue(value);
         if (multiple) {
-            updateSelectionInProgress(true);
-            const set = new Set(Array.isArray(computedValue)
-                ? computedValue
-                : [computedValue ?? ''].filter(Boolean));
-            if (set.has(value))
-                set.delete(value);
-            else
-                set.add(value);
-            const newValue = Array.from(set);
-            setInternalValue(newValue);
-            onValueChange?.(newValue);
+            onValueChange?.(value);
         }
         else {
-            setInternalValue(value);
             onValueChange?.(value);
         }
-    }, [multiple, onValueChange, computedValue, updateSelectionInProgress]);
-    const setSearchValue = useCallback((value) => {
+    }, [multiple, onValueChange]);
+    const handleSearchValueChange = useCallback((value, _eventDetails) => {
         setInternalSearchValue(value);
         onSearch?.(value);
     }, [onSearch]);
-    const handleOpenChange = useCallback((value) => {
-        if (isSelectionInProgress.current)
-            return;
-        setInternalOpen(value);
-        onOpenChange?.(value);
+    const handleOpenChange = useCallback((open, _eventDetails) => {
+        onOpenChange?.(open);
     }, [onOpenChange]);
     const registerItem = useCallback(item => {
-        setItems(prev => ({ ...prev, [item.value]: item }));
+        setRegisteredItems(prev => ({ ...prev, [item.value]: item }));
     }, []);
     const unregisterItem = useCallback(value => {
-        setItems(prev => {
+        setRegisteredItems(prev => {
             const { [value]: _, ...rest } = prev;
             return rest;
         });
     }, []);
-    /*
-     * Radix internally shows the placeholder when the value is empty.
-     * This value is used to manage the internal value of Radix Select to make it work
-     */
-    const radixValue = useMemo(() => {
-        if (!computedValue)
-            return '';
-        if (typeof computedValue === 'string')
-            return computedValue;
-        if (Array.isArray(computedValue) && computedValue.length)
-            return `${SELECT_INTERNAL_VALUE}-${id}`;
-        return String(computedValue) ?? '';
-    }, [computedValue, id]);
-    const element = (jsx(ComboboxProvider, { resetValueOnHide: true, focusLoop: false, includesBaseElement: false, value: searchValue, setValue: setSearchValue, open: open, setOpen: handleOpenChange, children: children }));
-    return (jsx(SelectContext.Provider, { value: {
-            value: computedValue,
-            registerItem,
-            unregisterItem,
-            autocomplete,
-            autocompleteMode,
-            searchValue,
-            multiple,
-            items,
-            updateSelectionInProgress,
-            setValue
-        }, children: jsx(Select.Root, { autoComplete: htmlAutoComplete, value: radixValue, onValueChange: setValue, open: open, onOpenChange: handleOpenChange, ...rest, children: autocomplete ? element : children }) }));
+    const contextValue = useMemo(() => ({
+        value: computedValue,
+        registerItem,
+        unregisterItem,
+        autocomplete,
+        autocompleteMode,
+        searchValue,
+        multiple,
+        items: registeredItems,
+        hasItems: !!itemsProp
+    }), [
+        computedValue,
+        registerItem,
+        unregisterItem,
+        autocomplete,
+        autocompleteMode,
+        searchValue,
+        multiple,
+        registeredItems,
+        itemsProp
+    ]);
+    const commonProps = {
+        value: providedValue,
+        defaultValue: defaultValue,
+        onValueChange: handleValueChange,
+        open: providedOpen,
+        defaultOpen,
+        onOpenChange: handleOpenChange,
+        multiple: multiple,
+        disabled,
+        modal: true,
+        ...rest
+    };
+    if (autocomplete) {
+        return (jsx(SelectContext, { value: contextValue, children: jsx(Combobox.Root, { ...commonProps, onInputValueChange: handleSearchValueChange, filter: itemsProp ? undefined : null, items: itemsProp, loopFocus: false, 
+                // @ts-ignore BaseUI types are not up to date
+                autoHighlight: 'always', children: children }) }));
+    }
+    return (jsx(SelectContext, { value: contextValue, children: jsx(Select.Root, { ...commonProps, required: required, name: name, children: children }) }));
 };
+SelectRoot.displayName = 'Select';
 
 export { SelectRoot, useSelectContext };
 //# sourceMappingURL=select-root.js.map

package/dist/components/select/select-root.js.map

@@ -1 +1 @@
-{"version":3,"file":"select-root.js","sources":["../../../components/select/select-root.tsx"],"sourcesContent":["'use client';\n\nimport { ComboboxProvider } from '@ariakit/react';\nimport { Select as SelectPrimitive } from 'radix-ui';\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useId,\n  useMemo,\n  useRef,\n  useState\n} from 'react';\nimport { ItemType } from './types';\n\ninterface CommonProps {\n  autocomplete?: boolean;\n  autocompleteMode?: 'auto' | 'manual';\n  searchValue?: string;\n  onSearch?: (value: string) => void;\n  defaultSearchValue?: string;\n}\n\ninterface SelectContextValue extends CommonProps {\n  value?: string | string[];\n  registerItem: (item: ItemType) => void;\n  unregisterItem: (value: string) => void;\n  multiple: boolean;\n  items: Record<string, ItemType>;\n  updateSelectionInProgress: (value: boolean) => void;\n  setValue: (value: string) => void;\n}\n\ninterface UseSelectContext extends SelectContextValue {\n  shouldFilter?: boolean;\n}\n\n/*\nRoot context to manage the Select control\n@remarks Only for internal usage.\n*/\nconst SelectContext = createContext<SelectContextValue | undefined>(undefined);\n\nexport const useSelectContext = (): UseSelectContext => {\n  const context = useContext(SelectContext);\n  if (!context) {\n    throw new Error('useSelectContext must be used within a SelectProvider');\n  }\n  const shouldFilter = !!(\n    context?.autocomplete &&\n    context?.autocompleteMode === 'auto' &&\n    context?.searchValue?.length\n  );\n  return {\n    ...context,\n    shouldFilter\n  };\n};\n\ninterface NormalSelectRootProps extends SelectPrimitive.SelectProps {\n  autocomplete?: false;\n  autocompleteMode?: never;\n  searchValue?: never;\n  onSearch?: never;\n  defaultSearchValue?: never;\n}\n\ninterface AutocompleteSelectRootProps\n  extends SelectPrimitive.SelectProps,\n    CommonProps {\n  autocomplete: true;\n}\n\nexport type BaseSelectProps = Omit<\n  NormalSelectRootProps | AutocompleteSelectRootProps,\n  'autoComplete' | 'value' | 'onValueChange' | 'defaultValue'\n> & {\n  htmlAutoComplete?: string;\n};\n\nexport interface SingleSelectProps extends BaseSelectProps {\n  multiple?: false;\n  value?: string;\n  onValueChange?: (value: string) => void;\n  defaultValue?: string;\n}\n\nexport interface MultipleSelectProps extends BaseSelectProps {\n  multiple: true;\n  value?: string[];\n  onValueChange?: (value: string[]) => void;\n  defaultValue?: string[];\n}\n\nexport type SelectRootProps = SingleSelectProps | MultipleSelectProps;\n\nconst SELECT_INTERNAL_VALUE = 'SELECT_INTERNAL_VALUE';\n\nexport const SelectRoot = (props: SelectRootProps) => {\n  const {\n    children,\n    value: providedValue,\n    onValueChange,\n    defaultValue,\n    autocomplete,\n    autocompleteMode = 'auto',\n    searchValue: providedSearchValue,\n    onSearch,\n    defaultSearchValue = '',\n    open: providedOpen,\n    defaultOpen = false,\n    onOpenChange,\n    htmlAutoComplete,\n    multiple = false,\n    ...rest\n  } = props;\n\n  const [internalValue, setInternalValue] = useState<\n    string | string[] | undefined\n  >(defaultValue);\n  const [internalSearchValue, setInternalSearchValue] =\n    useState(defaultSearchValue);\n  const [internalOpen, setInternalOpen] = useState(defaultOpen);\n  const [items, setItems] = useState<SelectContextValue['items']>({});\n  const id = useId();\n  const isSelectionInProgress = useRef(false);\n\n  const computedValue = providedValue ?? internalValue;\n  const searchValue = providedSearchValue ?? internalSearchValue;\n  const open = providedOpen ?? internalOpen;\n\n  const updateSelectionInProgress = useCallback((value: boolean) => {\n    isSelectionInProgress.current = value;\n  }, []);\n\n  const setValue = useCallback(\n    (value: string) => {\n      /*\n       * If the select is placed inside a form, onChange is called with an empty value\n       * WORKAROUND FOR ISSUE https://github.com/radix-ui/primitives/issues/3135\n       */\n      if (value === '') return;\n\n      if (multiple) {\n        updateSelectionInProgress(true);\n        const set = new Set<string>(\n          Array.isArray(computedValue)\n            ? computedValue\n            : [computedValue ?? ''].filter(Boolean)\n        );\n\n        if (set.has(value)) set.delete(value);\n        else set.add(value);\n\n        const newValue = Array.from(set);\n\n        setInternalValue(newValue);\n        (onValueChange as MultipleSelectProps['onValueChange'])?.(newValue);\n      } else {\n        setInternalValue(value);\n        (onValueChange as SingleSelectProps['onValueChange'])?.(value);\n      }\n    },\n    [multiple, onValueChange, computedValue, updateSelectionInProgress]\n  );\n\n  const setSearchValue = useCallback(\n    (value: string) => {\n      setInternalSearchValue(value);\n      onSearch?.(value);\n    },\n    [onSearch]\n  );\n\n  const handleOpenChange = useCallback(\n    (value: boolean) => {\n      if (isSelectionInProgress.current) return;\n      setInternalOpen(value);\n      onOpenChange?.(value);\n    },\n    [onOpenChange]\n  );\n\n  const registerItem = useCallback<SelectContextValue['registerItem']>(item => {\n    setItems(prev => ({ ...prev, [item.value]: item }));\n  }, []);\n\n  const unregisterItem = useCallback<SelectContextValue['unregisterItem']>(\n    value => {\n      setItems(prev => {\n        const { [value]: _, ...rest } = prev;\n        return rest;\n      });\n    },\n    []\n  );\n\n  /*\n   * Radix internally shows the placeholder when the value is empty.\n   * This value is used to manage the internal value of Radix Select to make it work\n   */\n  const radixValue = useMemo(() => {\n    if (!computedValue) return '';\n    if (typeof computedValue === 'string') return computedValue;\n    if (Array.isArray(computedValue) && computedValue.length)\n      return `${SELECT_INTERNAL_VALUE}-${id}`;\n    return String(computedValue) ?? '';\n  }, [computedValue, id]);\n\n  const element = (\n    <ComboboxProvider\n      resetValueOnHide\n      focusLoop={false}\n      includesBaseElement={false}\n      value={searchValue}\n      setValue={setSearchValue}\n      open={open}\n      setOpen={handleOpenChange}\n    >\n      {children}\n    </ComboboxProvider>\n  );\n\n  return (\n    <SelectContext.Provider\n      value={{\n        value: computedValue,\n        registerItem,\n        unregisterItem,\n        autocomplete,\n        autocompleteMode,\n        searchValue,\n        multiple,\n        items,\n        updateSelectionInProgress,\n        setValue\n      }}\n    >\n      <SelectPrimitive.Root\n        autoComplete={htmlAutoComplete}\n        value={radixValue}\n        onValueChange={setValue}\n        open={open}\n        onOpenChange={handleOpenChange}\n        {...rest}\n      >\n        {autocomplete ? element : children}\n      </SelectPrimitive.Root>\n    </SelectContext.Provider>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAqCA;;;AAGE;AACF;AAEO;AACL;;AAEE;;AAEF;;AAGE;;AAGA;;;AAGJ;AAuCA;AAEa;;;;;;AA0BX;AACA;AAEA;AACA;AACA;AAEA;AACE;;AAGF;AAEI;;;AAGG;;;;;;AAOG;AACA;AAGJ;AAAoB;;AACf;;;AAKJ;;;;AAGA;;;AAMP;;AAGI;AACF;AAIF;;;;AAII;AACF;AAIF;;;AAIA;;AAGM;AACA;AACF;;AAKJ;;;AAGG;AACH;AACE;AAAoB;;AACmB;;AAErC;AACF;AACF;AAEA;AAcA;AAGM;;;;;;;;;;AAUD;AAcP;;"}
+{"version":3,"file":"select-root.js","sources":["../../../components/select/select-root.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Combobox as ComboboxPrimitive,\n  Select as SelectPrimitive\n} from '@base-ui/react';\nimport {\n  createContext,\n  ReactNode,\n  useCallback,\n  useContext,\n  useMemo,\n  useState\n} from 'react';\nimport { ItemType } from './types';\n\ninterface CommonProps {\n  autocomplete?: boolean;\n  autocompleteMode?: 'auto' | 'manual';\n  searchValue?: string;\n  onSearch?: (value: string) => void;\n  defaultSearchValue?: string;\n}\n\ninterface SelectContextValue extends CommonProps {\n  value?: string | string[];\n  registerItem: (item: ItemType) => void;\n  unregisterItem: (value: string) => void;\n  multiple: boolean;\n  items: Record<string, ItemType>;\n  hasItems?: boolean;\n}\n\ninterface UseSelectContext extends SelectContextValue {\n  shouldFilter?: boolean;\n}\n\n/*\nRoot context to manage the Select control\n@remarks Only for internal usage.\n*/\nconst SelectContext = createContext<SelectContextValue | undefined>(undefined);\n\nexport const useSelectContext = (): UseSelectContext => {\n  const context = useContext(SelectContext);\n  if (!context) {\n    throw new Error('useSelectContext must be used within a SelectProvider');\n  }\n  const shouldFilter = !!(\n    context?.autocomplete &&\n    context?.autocompleteMode === 'auto' &&\n    context?.searchValue?.length\n  );\n  return {\n    ...context,\n    shouldFilter\n  };\n};\n\ninterface BaseSelectProps extends CommonProps {\n  children?: ReactNode;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  disabled?: boolean;\n  required?: boolean;\n  name?: string;\n  items?: string[];\n}\n\nexport interface SingleSelectProps extends BaseSelectProps {\n  multiple?: false;\n  value?: string;\n  onValueChange?: (value: string) => void;\n  defaultValue?: string;\n}\n\nexport interface MultipleSelectProps extends BaseSelectProps {\n  multiple: true;\n  value?: string[];\n  onValueChange?: (value: string[]) => void;\n  defaultValue?: string[];\n}\n\nexport type SelectRootProps = SingleSelectProps | MultipleSelectProps;\n\nexport const SelectRoot = (props: SelectRootProps) => {\n  const {\n    children,\n    value: providedValue,\n    onValueChange,\n    defaultValue,\n    autocomplete,\n    autocompleteMode = 'auto',\n    searchValue: providedSearchValue,\n    onSearch,\n    defaultSearchValue = '',\n    open: providedOpen,\n    defaultOpen = false,\n    onOpenChange,\n    multiple = false,\n    disabled,\n    required,\n    name,\n    items: itemsProp,\n    ...rest\n  } = props;\n\n  const [internalValue, setInternalValue] = useState<\n    string | string[] | undefined\n  >(defaultValue);\n  const [internalSearchValue, setInternalSearchValue] =\n    useState(defaultSearchValue);\n  const [registeredItems, setRegisteredItems] = useState<\n    SelectContextValue['items']\n  >({});\n\n  const computedValue = providedValue ?? internalValue;\n  const searchValue = providedSearchValue ?? internalSearchValue;\n\n  const handleValueChange = useCallback(\n    (value: any, _eventDetails?: any) => {\n      setInternalValue(value);\n      if (multiple) {\n        (onValueChange as MultipleSelectProps['onValueChange'])?.(\n          value as string[]\n        );\n      } else {\n        (onValueChange as SingleSelectProps['onValueChange'])?.(\n          value as string\n        );\n      }\n    },\n    [multiple, onValueChange]\n  );\n\n  const handleSearchValueChange = useCallback(\n    (value: string, _eventDetails?: any) => {\n      setInternalSearchValue(value);\n      onSearch?.(value);\n    },\n    [onSearch]\n  );\n\n  const handleOpenChange = useCallback(\n    (open: boolean, _eventDetails?: any) => {\n      onOpenChange?.(open);\n    },\n    [onOpenChange]\n  );\n\n  const registerItem = useCallback<SelectContextValue['registerItem']>(item => {\n    setRegisteredItems(prev => ({ ...prev, [item.value]: item }));\n  }, []);\n\n  const unregisterItem = useCallback<SelectContextValue['unregisterItem']>(\n    value => {\n      setRegisteredItems(prev => {\n        const { [value]: _, ...rest } = prev;\n        return rest;\n      });\n    },\n    []\n  );\n\n  const contextValue = useMemo(\n    () => ({\n      value: computedValue,\n      registerItem,\n      unregisterItem,\n      autocomplete,\n      autocompleteMode,\n      searchValue,\n      multiple,\n      items: registeredItems,\n      hasItems: !!itemsProp\n    }),\n    [\n      computedValue,\n      registerItem,\n      unregisterItem,\n      autocomplete,\n      autocompleteMode,\n      searchValue,\n      multiple,\n      registeredItems,\n      itemsProp\n    ]\n  );\n\n  const commonProps = {\n    value: providedValue as any,\n    defaultValue: defaultValue as any,\n    onValueChange: handleValueChange,\n    open: providedOpen,\n    defaultOpen,\n    onOpenChange: handleOpenChange,\n    multiple: multiple as any,\n    disabled,\n    modal: true as const,\n    ...rest\n  };\n\n  if (autocomplete) {\n    return (\n      <SelectContext value={contextValue}>\n        <ComboboxPrimitive.Root\n          {...commonProps}\n          onInputValueChange={handleSearchValueChange}\n          filter={itemsProp ? undefined : null}\n          items={itemsProp}\n          loopFocus={false}\n          // @ts-ignore BaseUI types are not up to date\n          autoHighlight='always'\n        >\n          {children}\n        </ComboboxPrimitive.Root>\n      </SelectContext>\n    );\n  }\n\n  return (\n    <SelectContext value={contextValue}>\n      <SelectPrimitive.Root {...commonProps} required={required} name={name}>\n        {children}\n      </SelectPrimitive.Root>\n    </SelectContext>\n  );\n};\n\nSelectRoot.displayName = 'Select';\n"],"names":[],"mappings":";;;;;AAqCA;;;AAGE;AACF;AAEO;AACL;;AAEE;;AAEF;;AAGE;;AAGA;;;AAGJ;AA6Ba;;;;;AA+BX;AACA;;;;AAMO;;;AAIA;;AAIL;;;AAOE;AACF;;AAME;AACF;AAIF;;;AAIA;;AAGM;AACA;AACF;;AAKJ;AAEI;;;;;;;AAOA;;AAED;;;;;;;;;;AAWA;AAGH;AACE;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;;AAIA;;AASM;;;AAeV;AAEA;;"}

package/dist/components/select/select-trigger.cjs

@@ -2,10 +2,9 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var react = require('@base-ui/react');
 var reactIcons = require('@radix-ui/react-icons');
 var classVarianceAuthority = require('class-variance-authority');
-var radixUi = require('radix-ui');
-var React = require('react');
 var flex = require('../flex/flex.cjs');
 var select_module = require('./select.module.css.cjs');
 var selectRoot = require('./select-root.cjs');
@@ -26,11 +25,14 @@ const trigger = classVarianceAuthority.cva(select_module.default.trigger, {
         variant: 'outline'
     }
 });
-const SelectTrigger = React.forwardRef(({ size, variant, className, children, iconProps = {}, asChild, 'aria-label': ariaLabel, ...props }, ref) => {
+function SelectTrigger({ ref, size, variant, className, children, iconProps = {}, 'aria-label': ariaLabel, ...props }) {
     const { multiple, autocomplete } = selectRoot.useSelectContext();
-    return (jsxRuntime.jsxs(radixUi.Select.Trigger, { "data-multiselectable": multiple ? true : undefined, ref: ref, className: trigger({ size, variant, className }), "aria-label": ariaLabel || 'Select option', "aria-haspopup": autocomplete ? 'dialog' : 'listbox', ...props, children: [jsxRuntime.jsx(flex.Flex, { className: select_module.default.triggerContent, align: 'center', gap: 2, children: asChild ? jsxRuntime.jsx(radixUi.Slot.Root, { children: children }) : children }), jsxRuntime.jsx(radixUi.Select.Icon, { asChild: true, children: jsxRuntime.jsx(reactIcons.ChevronDownIcon, { className: select_module.default.triggerIcon, "aria-hidden": 'true', ...iconProps }) })] }));
-});
-SelectTrigger.displayName = radixUi.Select.Trigger.displayName;
+    const TriggerPrimitive = autocomplete
+        ? react.Combobox.Trigger
+        : react.Select.Trigger;
+    return (jsxRuntime.jsxs(TriggerPrimitive, { "data-multiselectable": multiple ? true : undefined, ref: ref, className: trigger({ size, variant, className }), "aria-label": ariaLabel || 'Select option', ...props, children: [jsxRuntime.jsx(flex.Flex, { className: select_module.default.triggerContent, align: 'center', gap: 2, children: children }), jsxRuntime.jsx(reactIcons.ChevronDownIcon, { className: select_module.default.triggerIcon, "aria-hidden": 'true', ...iconProps })] }));
+}
+SelectTrigger.displayName = 'Select.Trigger';
 
 exports.SelectTrigger = SelectTrigger;
 //# sourceMappingURL=select-trigger.cjs.map

package/dist/components/select/select-trigger.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"select-trigger.cjs","sources":["../../../components/select/select-trigger.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronDownIcon } from '@radix-ui/react-icons';\nimport { cva, VariantProps } from 'class-variance-authority';\nimport { Select as SelectPrimitive, Slot } from 'radix-ui';\nimport { ElementRef, forwardRef, SVGAttributes } from 'react';\nimport { Flex } from '../flex';\nimport styles from './select.module.css';\nimport { useSelectContext } from './select-root';\n\nexport interface IconProps extends SVGAttributes<SVGElement> {\n  children?: never;\n  color?: string;\n}\n\nconst trigger = cva(styles.trigger, {\n  variants: {\n    size: {\n      small: styles['trigger-small'],\n      medium: styles['trigger-medium']\n    },\n    variant: {\n      outline: styles['trigger-outline'],\n      text: styles['trigger-text']\n    }\n  },\n  defaultVariants: {\n    size: 'medium',\n    variant: 'outline'\n  }\n});\n\nexport interface SelectTriggerProps\n  extends SelectPrimitive.SelectTriggerProps,\n    VariantProps<typeof trigger> {\n  iconProps?: IconProps;\n}\n\nexport const SelectTrigger = forwardRef<\n  ElementRef<typeof SelectPrimitive.Trigger>,\n  SelectTriggerProps\n>(\n  (\n    {\n      size,\n      variant,\n      className,\n      children,\n      iconProps = {},\n      asChild,\n      'aria-label': ariaLabel,\n      ...props\n    },\n    ref\n  ) => {\n    const { multiple, autocomplete } = useSelectContext();\n    return (\n      <SelectPrimitive.Trigger\n        data-multiselectable={multiple ? true : undefined}\n        ref={ref}\n        className={trigger({ size, variant, className })}\n        aria-label={ariaLabel || 'Select option'}\n        aria-haspopup={autocomplete ? 'dialog' : 'listbox'}\n        {...props}\n      >\n        <Flex className={styles.triggerContent} align='center' gap={2}>\n          {asChild ? <Slot.Root>{children}</Slot.Root> : children}\n        </Flex>\n        <SelectPrimitive.Icon asChild>\n          <ChevronDownIcon\n            className={styles.triggerIcon}\n            aria-hidden='true'\n            {...iconProps}\n          />\n        </SelectPrimitive.Icon>\n      </SelectPrimitive.Trigger>\n    );\n  }\n);\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName;\n"],"names":[],"mappings":";;;;;;;;;;;;AAeA;AACE;AACE;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACF;AACD;AACE;AACA;AACD;AACF;AAQM;;;AAuCL;AAEF;;"}
+{"version":3,"file":"select-trigger.cjs","sources":["../../../components/select/select-trigger.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Combobox as ComboboxPrimitive,\n  Select as SelectPrimitive\n} from '@base-ui/react';\nimport { ChevronDownIcon } from '@radix-ui/react-icons';\nimport { cva, VariantProps } from 'class-variance-authority';\nimport { ComponentProps, SVGAttributes } from 'react';\nimport { Flex } from '../flex';\nimport styles from './select.module.css';\nimport { useSelectContext } from './select-root';\n\nexport interface IconProps extends SVGAttributes<SVGElement> {\n  children?: never;\n  color?: string;\n}\n\nconst trigger = cva(styles.trigger, {\n  variants: {\n    size: {\n      small: styles['trigger-small'],\n      medium: styles['trigger-medium']\n    },\n    variant: {\n      outline: styles['trigger-outline'],\n      text: styles['trigger-text']\n    }\n  },\n  defaultVariants: {\n    size: 'medium',\n    variant: 'outline'\n  }\n});\n\nexport interface SelectTriggerProps\n  extends ComponentProps<'button'>,\n    VariantProps<typeof trigger> {\n  iconProps?: IconProps;\n  nativeButton?: boolean;\n}\n\nexport function SelectTrigger({\n  ref,\n  size,\n  variant,\n  className,\n  children,\n  iconProps = {},\n  'aria-label': ariaLabel,\n  ...props\n}: SelectTriggerProps) {\n  const { multiple, autocomplete } = useSelectContext();\n\n  const TriggerPrimitive = autocomplete\n    ? ComboboxPrimitive.Trigger\n    : SelectPrimitive.Trigger;\n\n  return (\n    <TriggerPrimitive\n      data-multiselectable={multiple ? true : undefined}\n      ref={ref}\n      className={trigger({ size, variant, className })}\n      aria-label={ariaLabel || 'Select option'}\n      {...props}\n    >\n      <Flex className={styles.triggerContent} align='center' gap={2}>\n        {children}\n      </Flex>\n      <ChevronDownIcon\n        className={styles.triggerIcon}\n        aria-hidden='true'\n        {...iconProps}\n      />\n    </TriggerPrimitive>\n  );\n}\nSelectTrigger.displayName = 'Select.Trigger';\n"],"names":[],"mappings":";;;;;;;;;;;AAkBA;AACE;AACE;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACF;AACD;AACE;AACA;AACD;AACF;AASK;;;;AAcF;AAEF;AAkBF;AACA;;"}

package/dist/components/select/select-trigger.d.ts

@@ -1,6 +1,5 @@
 import { VariantProps } from 'class-variance-authority';
-import { Select as SelectPrimitive } from 'radix-ui';
-import { SVGAttributes } from 'react';
+import { ComponentProps, SVGAttributes } from 'react';
 export interface IconProps extends SVGAttributes<SVGElement> {
     children?: never;
     color?: string;
@@ -9,9 +8,13 @@ declare const trigger: (props?: ({
     size?: "small" | "medium" | null | undefined;
     variant?: "text" | "outline" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export interface SelectTriggerProps extends SelectPrimitive.SelectTriggerProps, VariantProps<typeof trigger> {
+export interface SelectTriggerProps extends ComponentProps<'button'>, VariantProps<typeof trigger> {
     iconProps?: IconProps;
+    nativeButton?: boolean;
+}
+export declare function SelectTrigger({ ref, size, variant, className, children, iconProps, 'aria-label': ariaLabel, ...props }: SelectTriggerProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace SelectTrigger {
+    var displayName: string;
 }
-export declare const SelectTrigger: import("react").ForwardRefExoticComponent<SelectTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
 export {};
 //# sourceMappingURL=select-trigger.d.ts.map

package/dist/components/select/select-trigger.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select-trigger.d.ts","sourceRoot":"","sources":["../../../components/select/select-trigger.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAO,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EAAE,MAAM,IAAI,eAAe,EAAQ,MAAM,UAAU,CAAC;AAC3D,OAAO,EAA0B,aAAa,EAAE,MAAM,OAAO,CAAC;AAK9D,MAAM,WAAW,SAAU,SAAQ,aAAa,CAAC,UAAU,CAAC;IAC1D,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,OAAO;;;8EAeX,CAAC;AAEH,MAAM,WAAW,kBACf,SAAQ,eAAe,CAAC,kBAAkB,EACxC,YAAY,CAAC,OAAO,OAAO,CAAC;IAC9B,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAED,eAAO,MAAM,aAAa,kHAwCzB,CAAC"}
+{"version":3,"file":"select-trigger.d.ts","sourceRoot":"","sources":["../../../components/select/select-trigger.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAO,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAKtD,MAAM,WAAW,SAAU,SAAQ,aAAa,CAAC,UAAU,CAAC;IAC1D,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,OAAO;;;8EAeX,CAAC;AAEH,MAAM,WAAW,kBACf,SAAQ,cAAc,CAAC,QAAQ,CAAC,EAC9B,YAAY,CAAC,OAAO,OAAO,CAAC;IAC9B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,wBAAgB,aAAa,CAAC,EAC5B,GAAG,EACH,IAAI,EACJ,OAAO,EACP,SAAS,EACT,QAAQ,EACR,SAAc,EACd,YAAY,EAAE,SAAS,EACvB,GAAG,KAAK,EACT,EAAE,kBAAkB,2CAyBpB;yBAlCe,aAAa"}

package/dist/components/select/select-trigger.js

@@ -1,9 +1,8 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { Combobox, Select } from '@base-ui/react';
 import { ChevronDownIcon } from '@radix-ui/react-icons';
 import { cva } from 'class-variance-authority';
-import { Select, Slot } from 'radix-ui';
-import { forwardRef } from 'react';
 import { Flex } from '../flex/flex.js';
 import styles from './select.module.css.js';
 import { useSelectContext } from './select-root.js';
@@ -24,11 +23,14 @@ const trigger = cva(styles.trigger, {
         variant: 'outline'
     }
 });
-const SelectTrigger = forwardRef(({ size, variant, className, children, iconProps = {}, asChild, 'aria-label': ariaLabel, ...props }, ref) => {
+function SelectTrigger({ ref, size, variant, className, children, iconProps = {}, 'aria-label': ariaLabel, ...props }) {
     const { multiple, autocomplete } = useSelectContext();
-    return (jsxs(Select.Trigger, { "data-multiselectable": multiple ? true : undefined, ref: ref, className: trigger({ size, variant, className }), "aria-label": ariaLabel || 'Select option', "aria-haspopup": autocomplete ? 'dialog' : 'listbox', ...props, children: [jsx(Flex, { className: styles.triggerContent, align: 'center', gap: 2, children: asChild ? jsx(Slot.Root, { children: children }) : children }), jsx(Select.Icon, { asChild: true, children: jsx(ChevronDownIcon, { className: styles.triggerIcon, "aria-hidden": 'true', ...iconProps }) })] }));
-});
-SelectTrigger.displayName = Select.Trigger.displayName;
+    const TriggerPrimitive = autocomplete
+        ? Combobox.Trigger
+        : Select.Trigger;
+    return (jsxs(TriggerPrimitive, { "data-multiselectable": multiple ? true : undefined, ref: ref, className: trigger({ size, variant, className }), "aria-label": ariaLabel || 'Select option', ...props, children: [jsx(Flex, { className: styles.triggerContent, align: 'center', gap: 2, children: children }), jsx(ChevronDownIcon, { className: styles.triggerIcon, "aria-hidden": 'true', ...iconProps })] }));
+}
+SelectTrigger.displayName = 'Select.Trigger';
 
 export { SelectTrigger };
 //# sourceMappingURL=select-trigger.js.map

package/dist/components/select/select-trigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"select-trigger.js","sources":["../../../components/select/select-trigger.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronDownIcon } from '@radix-ui/react-icons';\nimport { cva, VariantProps } from 'class-variance-authority';\nimport { Select as SelectPrimitive, Slot } from 'radix-ui';\nimport { ElementRef, forwardRef, SVGAttributes } from 'react';\nimport { Flex } from '../flex';\nimport styles from './select.module.css';\nimport { useSelectContext } from './select-root';\n\nexport interface IconProps extends SVGAttributes<SVGElement> {\n  children?: never;\n  color?: string;\n}\n\nconst trigger = cva(styles.trigger, {\n  variants: {\n    size: {\n      small: styles['trigger-small'],\n      medium: styles['trigger-medium']\n    },\n    variant: {\n      outline: styles['trigger-outline'],\n      text: styles['trigger-text']\n    }\n  },\n  defaultVariants: {\n    size: 'medium',\n    variant: 'outline'\n  }\n});\n\nexport interface SelectTriggerProps\n  extends SelectPrimitive.SelectTriggerProps,\n    VariantProps<typeof trigger> {\n  iconProps?: IconProps;\n}\n\nexport const SelectTrigger = forwardRef<\n  ElementRef<typeof SelectPrimitive.Trigger>,\n  SelectTriggerProps\n>(\n  (\n    {\n      size,\n      variant,\n      className,\n      children,\n      iconProps = {},\n      asChild,\n      'aria-label': ariaLabel,\n      ...props\n    },\n    ref\n  ) => {\n    const { multiple, autocomplete } = useSelectContext();\n    return (\n      <SelectPrimitive.Trigger\n        data-multiselectable={multiple ? true : undefined}\n        ref={ref}\n        className={trigger({ size, variant, className })}\n        aria-label={ariaLabel || 'Select option'}\n        aria-haspopup={autocomplete ? 'dialog' : 'listbox'}\n        {...props}\n      >\n        <Flex className={styles.triggerContent} align='center' gap={2}>\n          {asChild ? <Slot.Root>{children}</Slot.Root> : children}\n        </Flex>\n        <SelectPrimitive.Icon asChild>\n          <ChevronDownIcon\n            className={styles.triggerIcon}\n            aria-hidden='true'\n            {...iconProps}\n          />\n        </SelectPrimitive.Icon>\n      </SelectPrimitive.Trigger>\n    );\n  }\n);\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName;\n"],"names":[],"mappings":";;;;;;;;;;AAeA;AACE;AACE;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACF;AACD;AACE;AACA;AACD;AACF;AAQM;;;AAuCL;AAEF;;"}
+{"version":3,"file":"select-trigger.js","sources":["../../../components/select/select-trigger.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Combobox as ComboboxPrimitive,\n  Select as SelectPrimitive\n} from '@base-ui/react';\nimport { ChevronDownIcon } from '@radix-ui/react-icons';\nimport { cva, VariantProps } from 'class-variance-authority';\nimport { ComponentProps, SVGAttributes } from 'react';\nimport { Flex } from '../flex';\nimport styles from './select.module.css';\nimport { useSelectContext } from './select-root';\n\nexport interface IconProps extends SVGAttributes<SVGElement> {\n  children?: never;\n  color?: string;\n}\n\nconst trigger = cva(styles.trigger, {\n  variants: {\n    size: {\n      small: styles['trigger-small'],\n      medium: styles['trigger-medium']\n    },\n    variant: {\n      outline: styles['trigger-outline'],\n      text: styles['trigger-text']\n    }\n  },\n  defaultVariants: {\n    size: 'medium',\n    variant: 'outline'\n  }\n});\n\nexport interface SelectTriggerProps\n  extends ComponentProps<'button'>,\n    VariantProps<typeof trigger> {\n  iconProps?: IconProps;\n  nativeButton?: boolean;\n}\n\nexport function SelectTrigger({\n  ref,\n  size,\n  variant,\n  className,\n  children,\n  iconProps = {},\n  'aria-label': ariaLabel,\n  ...props\n}: SelectTriggerProps) {\n  const { multiple, autocomplete } = useSelectContext();\n\n  const TriggerPrimitive = autocomplete\n    ? ComboboxPrimitive.Trigger\n    : SelectPrimitive.Trigger;\n\n  return (\n    <TriggerPrimitive\n      data-multiselectable={multiple ? true : undefined}\n      ref={ref}\n      className={trigger({ size, variant, className })}\n      aria-label={ariaLabel || 'Select option'}\n      {...props}\n    >\n      <Flex className={styles.triggerContent} align='center' gap={2}>\n        {children}\n      </Flex>\n      <ChevronDownIcon\n        className={styles.triggerIcon}\n        aria-hidden='true'\n        {...iconProps}\n      />\n    </TriggerPrimitive>\n  );\n}\nSelectTrigger.displayName = 'Select.Trigger';\n"],"names":[],"mappings":";;;;;;;;;AAkBA;AACE;AACE;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACF;AACD;AACE;AACA;AACD;AACF;AASK;;;;AAcF;AAEF;AAkBF;AACA;;"}

package/dist/components/select/select-value.cjs

@@ -3,14 +3,16 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var classVarianceAuthority = require('class-variance-authority');
-var radixUi = require('radix-ui');
 var React = require('react');
+var select_module = require('./select.module.css.cjs');
 var selectMultipleValue = require('./select-multiple-value.cjs');
 var selectRoot = require('./select-root.cjs');
-var select_module = require('./select.module.css.cjs');
 
-const SelectValue = React.forwardRef(({ children, ...props }, ref) => {
+function SelectValue({ children, placeholder, className, ...props }) {
     const { value, items, multiple } = selectRoot.useSelectContext();
+    const hasValue = multiple
+        ? Array.isArray(value) && value.length > 0
+        : !!value;
     const item = React.useMemo(() => {
         if (!value)
             return undefined;
@@ -22,14 +24,21 @@ const SelectValue = React.forwardRef(({ children, ...props }, ref) => {
         }
         return items[value];
     }, [value, items, multiple]);
+    if (!hasValue) {
+        return (jsxRuntime.jsx("span", { "data-placeholder": '', className: classVarianceAuthority.cx(select_module.default.placeholder, className), ...props, children: placeholder }));
+    }
+    if (typeof children === 'function') {
+        return (jsxRuntime.jsx("span", { className: className, ...props, children: children(item) }));
+    }
     if (children) {
-        return (jsxRuntime.jsx(radixUi.Select.Value, { ref: ref, ...props, children: typeof children === 'function' ? children(item) : children }));
+        return (jsxRuntime.jsx("span", { className: className, ...props, children: children }));
+    }
+    if (Array.isArray(item)) {
+        return jsxRuntime.jsx(selectMultipleValue.SelectMultipleValue, { data: item });
     }
-    if (Array.isArray(item))
-        return jsxRuntime.jsx(selectMultipleValue.SelectMultipleValue, { data: item, ref: ref, ...props });
-    return (jsxRuntime.jsx(radixUi.Select.Value, { ref: ref, ...props, children: jsxRuntime.jsxs("div", { className: classVarianceAuthority.cx(select_module.default.valueContent), children: [typeof item?.children === 'string' && item?.leadingIcon && (jsxRuntime.jsx("div", { className: select_module.default.itemIcon, children: item.leadingIcon })), item?.children ?? value] }) }));
-});
-SelectValue.displayName = radixUi.Select.Value.displayName;
+    return (jsxRuntime.jsx("span", { className: className, ...props, children: jsxRuntime.jsxs("div", { className: classVarianceAuthority.cx(select_module.default.valueContent), children: [typeof item?.children === 'string' && item?.leadingIcon && (jsxRuntime.jsx("div", { className: select_module.default.itemIcon, children: item.leadingIcon })), item?.children ?? value] }) }));
+}
+SelectValue.displayName = 'Select.Value';
 
 exports.SelectValue = SelectValue;
 //# sourceMappingURL=select-value.cjs.map

package/dist/components/select/select-value.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"select-value.cjs","sources":["../../../components/select/select-value.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { Select as SelectPrimitive } from 'radix-ui';\nimport { ElementRef, ReactNode, forwardRef, useMemo } from 'react';\nimport { SelectMultipleValue } from './select-multiple-value';\nimport { useSelectContext } from './select-root';\nimport styles from './select.module.css';\nimport { ItemType } from './types';\n\ntype ValueType = Omit<ItemType, 'children'>;\n\ntype SelectValueProps = Omit<SelectPrimitive.SelectValueProps, 'children'> & {\n  children?: ((value?: ValueType | ValueType[]) => ReactNode) | ReactNode;\n};\n\nexport const SelectValue = forwardRef<\n  ElementRef<typeof SelectPrimitive.Value>,\n  SelectValueProps\n>(({ children, ...props }, ref) => {\n  const { value, items, multiple } = useSelectContext();\n\n  const item = useMemo(() => {\n    if (!value) return undefined;\n    if (multiple && Array.isArray(value)) {\n      const itemValues = value.map(v => items[v]);\n      if (itemValues.length === 1) return itemValues[0];\n      return itemValues;\n    }\n    return items[value as string];\n  }, [value, items, multiple]);\n\n  if (children) {\n    return (\n      <SelectPrimitive.Value ref={ref} {...props}>\n        {typeof children === 'function' ? children(item) : children}\n      </SelectPrimitive.Value>\n    );\n  }\n\n  if (Array.isArray(item))\n    return <SelectMultipleValue data={item} ref={ref} {...props} />;\n\n  return (\n    <SelectPrimitive.Value ref={ref} {...props}>\n      <div className={cx(styles.valueContent)}>\n        {typeof item?.children === 'string' && item?.leadingIcon && (\n          <div className={styles.itemIcon}>{item.leadingIcon}</div>\n        )}\n        {item?.children ?? value}\n      </div>\n    </SelectPrimitive.Value>\n  );\n});\nSelectValue.displayName = SelectPrimitive.Value.displayName;\n"],"names":[],"mappings":";;;;;;;;;;;AAgBa;;AAMX;AACE;AAAY;;AAEV;AACA;AAA6B;AAC7B;;AAEF;;;AAIA;;AAOF;AACE;;AAYJ;AACA;;"}
+{"version":3,"file":"select-value.cjs","sources":["../../../components/select/select-value.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { ComponentProps, ReactNode, useMemo } from 'react';\nimport styles from './select.module.css';\nimport { SelectMultipleValue } from './select-multiple-value';\nimport { useSelectContext } from './select-root';\nimport { ItemType } from './types';\n\ntype ValueType = Omit<ItemType, 'children'>;\n\ntype SelectValueProps = ComponentProps<'span'> & {\n  placeholder?: string;\n  children?: ((value?: ValueType | ValueType[]) => ReactNode) | ReactNode;\n  className?: string;\n};\n\nexport function SelectValue({\n  children,\n  placeholder,\n  className,\n  ...props\n}: SelectValueProps) {\n  const { value, items, multiple } = useSelectContext();\n\n  const hasValue = multiple\n    ? Array.isArray(value) && value.length > 0\n    : !!value;\n\n  const item = useMemo(() => {\n    if (!value) return undefined;\n    if (multiple && Array.isArray(value)) {\n      const itemValues = value.map(v => items[v]);\n      if (itemValues.length === 1) return itemValues[0];\n      return itemValues;\n    }\n    return items[value as string];\n  }, [value, items, multiple]);\n\n  if (!hasValue) {\n    return (\n      <span\n        data-placeholder=''\n        className={cx(styles.placeholder, className)}\n        {...props}\n      >\n        {placeholder}\n      </span>\n    );\n  }\n\n  if (typeof children === 'function') {\n    return (\n      <span className={className} {...props}>\n        {children(item)}\n      </span>\n    );\n  }\n\n  if (children) {\n    return (\n      <span className={className} {...props}>\n        {children}\n      </span>\n    );\n  }\n\n  if (Array.isArray(item)) {\n    return <SelectMultipleValue data={item} />;\n  }\n\n  return (\n    <span className={className} {...props}>\n      <div className={cx(styles.valueContent)}>\n        {typeof item?.children === 'string' && item?.leadingIcon && (\n          <div className={styles.itemIcon}>{item.leadingIcon}</div>\n        )}\n        {item?.children ?? value}\n      </div>\n    </span>\n  );\n}\nSelectValue.displayName = 'Select.Value';\n"],"names":[],"mappings":";;;;;;;;;;AAiBgB;;;AASZ;AACA;AAEF;AACE;AAAY;;AAEV;AACA;AAA6B;AAC7B;;AAEF;;;;;AAeF;AACE;;;;;AAeF;AACE;;;AAaJ;AACA;;"}

package/dist/components/select/select-value.d.ts

@@ -1,9 +1,14 @@
-import { Select as SelectPrimitive } from 'radix-ui';
-import { ReactNode } from 'react';
+import { ComponentProps, ReactNode } from 'react';
 import { ItemType } from './types';
 type ValueType = Omit<ItemType, 'children'>;
-export declare const SelectValue: import("react").ForwardRefExoticComponent<Omit<SelectPrimitive.SelectValueProps, "children"> & {
-    children?: ReactNode | ((value?: ValueType | ValueType[]) => ReactNode);
-} & import("react").RefAttributes<HTMLSpanElement>>;
+type SelectValueProps = ComponentProps<'span'> & {
+    placeholder?: string;
+    children?: ((value?: ValueType | ValueType[]) => ReactNode) | ReactNode;
+    className?: string;
+};
+export declare function SelectValue({ children, placeholder, className, ...props }: SelectValueProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace SelectValue {
+    var displayName: string;
+}
 export {};
 //# sourceMappingURL=select-value.d.ts.map

package/dist/components/select/select-value.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select-value.d.ts","sourceRoot":"","sources":["../../../components/select/select-value.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,UAAU,CAAC;AACrD,OAAO,EAAc,SAAS,EAAuB,MAAM,OAAO,CAAC;AAInE,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAEnC,KAAK,SAAS,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;AAM5C,eAAO,MAAM,WAAW;qCAHD,SAAS,GAAG,SAAS,EAAE,KAAK,SAAS;mDAwC1D,CAAC"}
+{"version":3,"file":"select-value.d.ts","sourceRoot":"","sources":["../../../components/select/select-value.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAW,MAAM,OAAO,CAAC;AAI3D,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAEnC,KAAK,SAAS,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;AAE5C,KAAK,gBAAgB,GAAG,cAAc,CAAC,MAAM,CAAC,GAAG;IAC/C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,KAAK,SAAS,CAAC,GAAG,SAAS,CAAC;IACxE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,WAAW,EACX,SAAS,EACT,GAAG,KAAK,EACT,EAAE,gBAAgB,2CA2DlB;yBAhEe,WAAW"}

package/dist/components/select/select-value.js

@@ -1,14 +1,16 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { cx } from 'class-variance-authority';
-import { Select } from 'radix-ui';
-import { forwardRef, useMemo } from 'react';
+import { useMemo } from 'react';
+import styles from './select.module.css.js';
 import { SelectMultipleValue } from './select-multiple-value.js';
 import { useSelectContext } from './select-root.js';
-import styles from './select.module.css.js';
 
-const SelectValue = forwardRef(({ children, ...props }, ref) => {
+function SelectValue({ children, placeholder, className, ...props }) {
     const { value, items, multiple } = useSelectContext();
+    const hasValue = multiple
+        ? Array.isArray(value) && value.length > 0
+        : !!value;
     const item = useMemo(() => {
         if (!value)
             return undefined;
@@ -20,14 +22,21 @@ const SelectValue = forwardRef(({ children, ...props }, ref) => {
         }
         return items[value];
     }, [value, items, multiple]);
+    if (!hasValue) {
+        return (jsx("span", { "data-placeholder": '', className: cx(styles.placeholder, className), ...props, children: placeholder }));
+    }
+    if (typeof children === 'function') {
+        return (jsx("span", { className: className, ...props, children: children(item) }));
+    }
     if (children) {
-        return (jsx(Select.Value, { ref: ref, ...props, children: typeof children === 'function' ? children(item) : children }));
+        return (jsx("span", { className: className, ...props, children: children }));
+    }
+    if (Array.isArray(item)) {
+        return jsx(SelectMultipleValue, { data: item });
     }
-    if (Array.isArray(item))
-        return jsx(SelectMultipleValue, { data: item, ref: ref, ...props });
-    return (jsx(Select.Value, { ref: ref, ...props, children: jsxs("div", { className: cx(styles.valueContent), children: [typeof item?.children === 'string' && item?.leadingIcon && (jsx("div", { className: styles.itemIcon, children: item.leadingIcon })), item?.children ?? value] }) }));
-});
-SelectValue.displayName = Select.Value.displayName;
+    return (jsx("span", { className: className, ...props, children: jsxs("div", { className: cx(styles.valueContent), children: [typeof item?.children === 'string' && item?.leadingIcon && (jsx("div", { className: styles.itemIcon, children: item.leadingIcon })), item?.children ?? value] }) }));
+}
+SelectValue.displayName = 'Select.Value';
 
 export { SelectValue };
 //# sourceMappingURL=select-value.js.map

package/dist/components/select/select-value.js.map

@@ -1 +1 @@
-{"version":3,"file":"select-value.js","sources":["../../../components/select/select-value.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { Select as SelectPrimitive } from 'radix-ui';\nimport { ElementRef, ReactNode, forwardRef, useMemo } from 'react';\nimport { SelectMultipleValue } from './select-multiple-value';\nimport { useSelectContext } from './select-root';\nimport styles from './select.module.css';\nimport { ItemType } from './types';\n\ntype ValueType = Omit<ItemType, 'children'>;\n\ntype SelectValueProps = Omit<SelectPrimitive.SelectValueProps, 'children'> & {\n  children?: ((value?: ValueType | ValueType[]) => ReactNode) | ReactNode;\n};\n\nexport const SelectValue = forwardRef<\n  ElementRef<typeof SelectPrimitive.Value>,\n  SelectValueProps\n>(({ children, ...props }, ref) => {\n  const { value, items, multiple } = useSelectContext();\n\n  const item = useMemo(() => {\n    if (!value) return undefined;\n    if (multiple && Array.isArray(value)) {\n      const itemValues = value.map(v => items[v]);\n      if (itemValues.length === 1) return itemValues[0];\n      return itemValues;\n    }\n    return items[value as string];\n  }, [value, items, multiple]);\n\n  if (children) {\n    return (\n      <SelectPrimitive.Value ref={ref} {...props}>\n        {typeof children === 'function' ? children(item) : children}\n      </SelectPrimitive.Value>\n    );\n  }\n\n  if (Array.isArray(item))\n    return <SelectMultipleValue data={item} ref={ref} {...props} />;\n\n  return (\n    <SelectPrimitive.Value ref={ref} {...props}>\n      <div className={cx(styles.valueContent)}>\n        {typeof item?.children === 'string' && item?.leadingIcon && (\n          <div className={styles.itemIcon}>{item.leadingIcon}</div>\n        )}\n        {item?.children ?? value}\n      </div>\n    </SelectPrimitive.Value>\n  );\n});\nSelectValue.displayName = SelectPrimitive.Value.displayName;\n"],"names":[],"mappings":";;;;;;;;;AAgBa;;AAMX;AACE;AAAY;;AAEV;AACA;AAA6B;AAC7B;;AAEF;;;AAIA;;AAOF;AACE;;AAYJ;AACA;;"}
+{"version":3,"file":"select-value.js","sources":["../../../components/select/select-value.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { ComponentProps, ReactNode, useMemo } from 'react';\nimport styles from './select.module.css';\nimport { SelectMultipleValue } from './select-multiple-value';\nimport { useSelectContext } from './select-root';\nimport { ItemType } from './types';\n\ntype ValueType = Omit<ItemType, 'children'>;\n\ntype SelectValueProps = ComponentProps<'span'> & {\n  placeholder?: string;\n  children?: ((value?: ValueType | ValueType[]) => ReactNode) | ReactNode;\n  className?: string;\n};\n\nexport function SelectValue({\n  children,\n  placeholder,\n  className,\n  ...props\n}: SelectValueProps) {\n  const { value, items, multiple } = useSelectContext();\n\n  const hasValue = multiple\n    ? Array.isArray(value) && value.length > 0\n    : !!value;\n\n  const item = useMemo(() => {\n    if (!value) return undefined;\n    if (multiple && Array.isArray(value)) {\n      const itemValues = value.map(v => items[v]);\n      if (itemValues.length === 1) return itemValues[0];\n      return itemValues;\n    }\n    return items[value as string];\n  }, [value, items, multiple]);\n\n  if (!hasValue) {\n    return (\n      <span\n        data-placeholder=''\n        className={cx(styles.placeholder, className)}\n        {...props}\n      >\n        {placeholder}\n      </span>\n    );\n  }\n\n  if (typeof children === 'function') {\n    return (\n      <span className={className} {...props}>\n        {children(item)}\n      </span>\n    );\n  }\n\n  if (children) {\n    return (\n      <span className={className} {...props}>\n        {children}\n      </span>\n    );\n  }\n\n  if (Array.isArray(item)) {\n    return <SelectMultipleValue data={item} />;\n  }\n\n  return (\n    <span className={className} {...props}>\n      <div className={cx(styles.valueContent)}>\n        {typeof item?.children === 'string' && item?.leadingIcon && (\n          <div className={styles.itemIcon}>{item.leadingIcon}</div>\n        )}\n        {item?.children ?? value}\n      </div>\n    </span>\n  );\n}\nSelectValue.displayName = 'Select.Value';\n"],"names":[],"mappings":";;;;;;;;AAiBgB;;;AASZ;AACA;AAEF;AACE;AAAY;;AAEV;AACA;AAA6B;AAC7B;;AAEF;;;;;AAeF;AACE;;;;;AAeF;AACE;;;AAaJ;AACA;;"}

package/dist/components/select/select.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var radixUi = require('radix-ui');
+var react = require('@base-ui/react');
 var selectContent = require('./select-content.cjs');
 var selectItem = require('./select-item.cjs');
 var selectMisc = require('./select-misc.cjs');
@@ -11,9 +11,9 @@ var selectValue = require('./select-value.cjs');
 const Select = Object.assign(selectRoot.SelectRoot, {
     Group: selectMisc.SelectGroup,
     Value: selectValue.SelectValue,
-    ScrollUpButton: radixUi.Select.ScrollDownButton,
-    ScrollDownButton: radixUi.Select.ScrollDownButton,
-    Viewport: radixUi.Select.Viewport,
+    ScrollUpArrow: react.Select.ScrollUpArrow,
+    ScrollDownArrow: react.Select.ScrollDownArrow,
+    List: react.Select.List,
     Trigger: selectTrigger.SelectTrigger,
     Content: selectContent.SelectContent,
     Item: selectItem.SelectItem,

package/dist/components/select/select.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"select.cjs","sources":["../../../components/select/select.tsx"],"sourcesContent":["import { Select as SelectPrimitive } from 'radix-ui';\nimport { SelectContent } from './select-content';\nimport { SelectItem } from './select-item';\nimport { SelectGroup, SelectLabel, SelectSeparator } from './select-misc';\nimport { SelectRoot } from './select-root';\nimport { SelectTrigger } from './select-trigger';\nimport { SelectValue } from './select-value';\n\nexport const Select = Object.assign(SelectRoot, {\n  Group: SelectGroup,\n  Value: SelectValue,\n  ScrollUpButton: SelectPrimitive.ScrollDownButton,\n  ScrollDownButton: SelectPrimitive.ScrollDownButton,\n  Viewport: SelectPrimitive.Viewport,\n  Trigger: SelectTrigger,\n  Content: SelectContent,\n  Item: SelectItem,\n  Separator: SelectSeparator,\n  Label: SelectLabel\n});\n"],"names":["SelectRoot","SelectGroup","SelectValue","SelectPrimitive","SelectTrigger","SelectContent","SelectItem","SelectSeparator","SelectLabel"],"mappings":";;;;;;;;;;MAQa,MAAM,GAAG,MAAM,CAAC,MAAM,CAACA,qBAAU,EAAE;AAC9C,IAAA,KAAK,EAAEC,sBAAW;AAClB,IAAA,KAAK,EAAEC,uBAAW;IAClB,cAAc,EAAEC,cAAe,CAAC,gBAAgB;IAChD,gBAAgB,EAAEA,cAAe,CAAC,gBAAgB;IAClD,QAAQ,EAAEA,cAAe,CAAC,QAAQ;AAClC,IAAA,OAAO,EAAEC,2BAAa;AACtB,IAAA,OAAO,EAAEC,2BAAa;AACtB,IAAA,IAAI,EAAEC,qBAAU;AAChB,IAAA,SAAS,EAAEC,0BAAe;AAC1B,IAAA,KAAK,EAAEC,sBAAW;AACnB,CAAA;;;;"}
+{"version":3,"file":"select.cjs","sources":["../../../components/select/select.tsx"],"sourcesContent":["import { Select as SelectPrimitive } from '@base-ui/react';\nimport { SelectContent } from './select-content';\nimport { SelectItem } from './select-item';\nimport { SelectGroup, SelectLabel, SelectSeparator } from './select-misc';\nimport { SelectRoot } from './select-root';\nimport { SelectTrigger } from './select-trigger';\nimport { SelectValue } from './select-value';\n\nexport const Select = Object.assign(SelectRoot, {\n  Group: SelectGroup,\n  Value: SelectValue,\n  ScrollUpArrow: SelectPrimitive.ScrollUpArrow,\n  ScrollDownArrow: SelectPrimitive.ScrollDownArrow,\n  List: SelectPrimitive.List,\n  Trigger: SelectTrigger,\n  Content: SelectContent,\n  Item: SelectItem,\n  Separator: SelectSeparator,\n  Label: SelectLabel\n});\n"],"names":["SelectRoot","SelectGroup","SelectValue","SelectPrimitive","SelectTrigger","SelectContent","SelectItem","SelectSeparator","SelectLabel"],"mappings":";;;;;;;;;;MAQa,MAAM,GAAG,MAAM,CAAC,MAAM,CAACA,qBAAU,EAAE;AAC9C,IAAA,KAAK,EAAEC,sBAAW;AAClB,IAAA,KAAK,EAAEC,uBAAW;IAClB,aAAa,EAAEC,YAAe,CAAC,aAAa;IAC5C,eAAe,EAAEA,YAAe,CAAC,eAAe;IAChD,IAAI,EAAEA,YAAe,CAAC,IAAI;AAC1B,IAAA,OAAO,EAAEC,2BAAa;AACtB,IAAA,OAAO,EAAEC,2BAAa;AACtB,IAAA,IAAI,EAAEC,qBAAU;AAChB,IAAA,SAAS,EAAEC,0BAAe;AAC1B,IAAA,KAAK,EAAEC,sBAAW;AACnB,CAAA;;;;"}

package/dist/components/select/select.d.ts

@@ -1,24 +1,21 @@
-import { Select as SelectPrimitive } from 'radix-ui';
-export declare const Select: ((props: import("./select-root").SelectRootProps) => import("react/jsx-runtime").JSX.Element) & {
-    Group: import("react").ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & import("react").RefAttributes<HTMLDivElement>>;
-    Value: import("react").ForwardRefExoticComponent<Omit<SelectPrimitive.SelectValueProps, "children"> & {
-        children?: import("react").ReactNode | ((value?: {
-            value: string;
-            leadingIcon?: import("react").ReactNode;
-        } | {
-            value: string;
-            leadingIcon?: import("react").ReactNode;
-        }[] | undefined) => import("react").ReactNode);
-    } & import("react").RefAttributes<HTMLSpanElement>>;
-    ScrollUpButton: import("react").ForwardRefExoticComponent<SelectPrimitive.SelectScrollDownButtonProps & import("react").RefAttributes<HTMLDivElement>>;
-    ScrollDownButton: import("react").ForwardRefExoticComponent<SelectPrimitive.SelectScrollDownButtonProps & import("react").RefAttributes<HTMLDivElement>>;
-    Viewport: import("react").ForwardRefExoticComponent<SelectPrimitive.SelectViewportProps & import("react").RefAttributes<HTMLDivElement>>;
-    Trigger: import("react").ForwardRefExoticComponent<import("./select-trigger").SelectTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
-    Content: import("react").ForwardRefExoticComponent<import("./select-content").SelectContentProps & import("react").RefAttributes<HTMLDivElement>>;
-    Item: import("react").ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps, "asChild"> & {
-        leadingIcon?: import("react").ReactNode;
-    } & import("react").RefAttributes<HTMLDivElement>>;
-    Separator: import("react").ForwardRefExoticComponent<SelectPrimitive.SelectSeparatorProps & import("react").RefAttributes<HTMLDivElement>>;
-    Label: import("react").ForwardRefExoticComponent<SelectPrimitive.SelectLabelProps & import("react").RefAttributes<HTMLDivElement>>;
+import { SelectContent } from './select-content';
+import { SelectItem } from './select-item';
+import { SelectGroup, SelectLabel, SelectSeparator } from './select-misc';
+import { SelectTrigger } from './select-trigger';
+import { SelectValue } from './select-value';
+export declare const Select: {
+    (props: import("./select-root").SelectRootProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    Group: typeof SelectGroup;
+    Value: typeof SelectValue;
+    ScrollUpArrow: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").SelectScrollUpArrowProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    ScrollDownArrow: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").SelectScrollDownArrowProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    List: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").SelectListProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Trigger: typeof SelectTrigger;
+    Content: typeof SelectContent;
+    Item: typeof SelectItem;
+    Separator: typeof SelectSeparator;
+    Label: typeof SelectLabel;
 };
 //# sourceMappingURL=select.d.ts.map

package/dist/components/select/select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../components/select/select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,UAAU,CAAC;AAQrD,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;CAWjB,CAAC"}
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../components/select/select.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAE1E,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,eAAO,MAAM,MAAM;;;;;;;;;;;;;;CAWjB,CAAC"}

package/dist/components/select/select.js

@@ -1,4 +1,4 @@
-import { Select as Select$1 } from 'radix-ui';
+import { Select as Select$1 } from '@base-ui/react';
 import { SelectContent } from './select-content.js';
 import { SelectItem } from './select-item.js';
 import { SelectGroup, SelectSeparator, SelectLabel } from './select-misc.js';
@@ -9,9 +9,9 @@ import { SelectValue } from './select-value.js';
 const Select = Object.assign(SelectRoot, {
     Group: SelectGroup,
     Value: SelectValue,
-    ScrollUpButton: Select$1.ScrollDownButton,
-    ScrollDownButton: Select$1.ScrollDownButton,
-    Viewport: Select$1.Viewport,
+    ScrollUpArrow: Select$1.ScrollUpArrow,
+    ScrollDownArrow: Select$1.ScrollDownArrow,
+    List: Select$1.List,
     Trigger: SelectTrigger,
     Content: SelectContent,
     Item: SelectItem,

package/dist/components/select/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","sources":["../../../components/select/select.tsx"],"sourcesContent":["import { Select as SelectPrimitive } from 'radix-ui';\nimport { SelectContent } from './select-content';\nimport { SelectItem } from './select-item';\nimport { SelectGroup, SelectLabel, SelectSeparator } from './select-misc';\nimport { SelectRoot } from './select-root';\nimport { SelectTrigger } from './select-trigger';\nimport { SelectValue } from './select-value';\n\nexport const Select = Object.assign(SelectRoot, {\n  Group: SelectGroup,\n  Value: SelectValue,\n  ScrollUpButton: SelectPrimitive.ScrollDownButton,\n  ScrollDownButton: SelectPrimitive.ScrollDownButton,\n  Viewport: SelectPrimitive.Viewport,\n  Trigger: SelectTrigger,\n  Content: SelectContent,\n  Item: SelectItem,\n  Separator: SelectSeparator,\n  Label: SelectLabel\n});\n"],"names":["SelectPrimitive"],"mappings":";;;;;;;;MAQa,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,UAAU,EAAE;AAC9C,IAAA,KAAK,EAAE,WAAW;AAClB,IAAA,KAAK,EAAE,WAAW;IAClB,cAAc,EAAEA,QAAe,CAAC,gBAAgB;IAChD,gBAAgB,EAAEA,QAAe,CAAC,gBAAgB;IAClD,QAAQ,EAAEA,QAAe,CAAC,QAAQ;AAClC,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,IAAI,EAAE,UAAU;AAChB,IAAA,SAAS,EAAE,eAAe;AAC1B,IAAA,KAAK,EAAE,WAAW;AACnB,CAAA;;;;"}
+{"version":3,"file":"select.js","sources":["../../../components/select/select.tsx"],"sourcesContent":["import { Select as SelectPrimitive } from '@base-ui/react';\nimport { SelectContent } from './select-content';\nimport { SelectItem } from './select-item';\nimport { SelectGroup, SelectLabel, SelectSeparator } from './select-misc';\nimport { SelectRoot } from './select-root';\nimport { SelectTrigger } from './select-trigger';\nimport { SelectValue } from './select-value';\n\nexport const Select = Object.assign(SelectRoot, {\n  Group: SelectGroup,\n  Value: SelectValue,\n  ScrollUpArrow: SelectPrimitive.ScrollUpArrow,\n  ScrollDownArrow: SelectPrimitive.ScrollDownArrow,\n  List: SelectPrimitive.List,\n  Trigger: SelectTrigger,\n  Content: SelectContent,\n  Item: SelectItem,\n  Separator: SelectSeparator,\n  Label: SelectLabel\n});\n"],"names":["SelectPrimitive"],"mappings":";;;;;;;;MAQa,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,UAAU,EAAE;AAC9C,IAAA,KAAK,EAAE,WAAW;AAClB,IAAA,KAAK,EAAE,WAAW;IAClB,aAAa,EAAEA,QAAe,CAAC,aAAa;IAC5C,eAAe,EAAEA,QAAe,CAAC,eAAe;IAChD,IAAI,EAAEA,QAAe,CAAC,IAAI;AAC1B,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,IAAI,EAAE,UAAU;AAChB,IAAA,SAAS,EAAE,eAAe;AAC1B,IAAA,KAAK,EAAE,WAAW;AACnB,CAAA;;;;"}