@box/blueprint-web 5.31.3

package/lib-esm/radio-group/radio-item.js

@@ -0,0 +1,50 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as RadixRadioGroup from '@radix-ui/react-radio-group';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { TextWithInfoBadge } from '../util-components/text-with-info-badge/text-with-info-badge.js';
+import { useUniqueId } from '../utils/useUniqueId.js';
+import styles from './radio-group.module.js';
+
+const RadioItem = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    value,
+    disabled,
+    label,
+    description,
+    className,
+    ...rest
+  } = props;
+  const descriptionId = useUniqueId('description-', !!description);
+  return jsxs("div", {
+    className: clsx([styles.radioOption], {
+      [styles.disabled]: disabled
+    }, className),
+    children: [jsxs("label", {
+      className: styles.label,
+      children: [jsx(RadixRadioGroup.Item, {
+        ...rest,
+        ref: ref,
+        "aria-describedby": descriptionId,
+        "aria-label": label,
+        className: styles.radioButton,
+        disabled: disabled,
+        value: value,
+        children: jsx(RadixRadioGroup.Indicator, {
+          className: styles.indicator,
+          forceMount: true
+        })
+      }), label]
+    }), description ? jsx("div", {
+      className: styles.description,
+      children: jsx(TextWithInfoBadge, {
+        id: descriptionId,
+        variant: "muted",
+        children: description
+      })
+    }) : null]
+  });
+});
+RadioItem.displayName = 'RadioItem';
+
+export { RadioItem, RadioItem as default };

package/lib-esm/radio-group/types.d.ts

@@ -0,0 +1,13 @@
+import { type RadioGroupItemProps, type RadioGroupProps as RadixRadioGroupProps } from '@radix-ui/react-radio-group';
+import { type StyledText } from '../utils/commonTypes';
+export type RadioGroupProps = RadixRadioGroupProps;
+export interface RadioItemProps extends RadioGroupItemProps {
+    /** The value given as data when submitted with a name. */
+    value: string;
+    /** The label for the radio button. */
+    label: string;
+    /** Additional text to aid in use. */
+    description?: StyledText;
+    /** When true, prevents the user from interacting with the radio item */
+    disabled?: boolean;
+}

package/lib-esm/search-input/index.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+export declare const SearchInput: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
+    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
+}, "disabled" | "type" | "onChange" | "defaultValue" | "className" | "onSubmit" | "onKeyDown" | "searchIconAriaLabel" | "searchInputAriaLabel" | "searchInputClearAriaLabel" | "variant"> & {
+    className?: string | undefined;
+    defaultValue?: string | undefined;
+    disabled?: boolean | undefined;
+    onChange?: ((searchInputValue: string) => void) | undefined;
+    onKeyDown?: ((e: import("react").KeyboardEvent<HTMLInputElement>) => void) | undefined;
+    onSubmit?: ((searchInputValue: string) => void) | undefined;
+    searchIconAriaLabel: string;
+    searchInputAriaLabel: string;
+    searchInputClearAriaLabel: string;
+    type?: "search" | undefined;
+    variant?: "in-context" | "global" | undefined;
+}, "ref"> & import("react").RefAttributes<HTMLInputElement>> & {
+    /**
+     * Styled wrapper over an icon button.
+     */
+    ActionButton: import("react").ForwardRefExoticComponent<Omit<import("../..").IconButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+};
+export type { SearchInputActionButtonProps, SearchInputProps } from './types';

package/lib-esm/search-input/index.js

@@ -0,0 +1,11 @@
+import { SearchInput as SearchInput$1 } from './search-input.js';
+import { SearchInputActionButton } from './search-input-action-button.js';
+
+const SearchInput = Object.assign(SearchInput$1, {
+  /**
+   * Styled wrapper over an icon button.
+   */
+  ActionButton: SearchInputActionButton
+});
+
+export { SearchInput };

package/lib-esm/search-input/search-input-action-button.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const SearchInputActionButton: import("react").ForwardRefExoticComponent<Omit<import("../primitives/icon-button").IconButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/lib-esm/search-input/search-input-action-button.js

@@ -0,0 +1,26 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { IconButton } from '../primitives/icon-button/icon-button.js';
+import styles from './search.module.js';
+
+const SearchInputActionButton = /*#__PURE__*/forwardRef(function SearchInputActionButton(props, forwardedRef) {
+  const {
+    'aria-label': ariaLabel,
+    className,
+    onClick,
+    icon,
+    ...rest
+  } = props;
+  return jsx(IconButton, {
+    ...rest,
+    ref: forwardedRef,
+    "aria-label": ariaLabel,
+    className: clsx(styles.actionButton, className),
+    icon: icon,
+    // <button> onclick fires for clicks and Space/Enter key when focused.
+    onClick: onClick
+  });
+});
+
+export { SearchInputActionButton };

package/lib-esm/search-input/search-input.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+export declare const SearchInput: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
+    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
+}, "disabled" | "type" | "onChange" | "defaultValue" | "className" | "onSubmit" | "onKeyDown" | "searchIconAriaLabel" | "searchInputAriaLabel" | "searchInputClearAriaLabel" | "variant"> & {
+    className?: string | undefined;
+    defaultValue?: string | undefined;
+    disabled?: boolean | undefined;
+    onChange?: ((searchInputValue: string) => void) | undefined;
+    onKeyDown?: ((e: import("react").KeyboardEvent<HTMLInputElement>) => void) | undefined;
+    onSubmit?: ((searchInputValue: string) => void) | undefined;
+    searchIconAriaLabel: string;
+    searchInputAriaLabel: string;
+    searchInputClearAriaLabel: string;
+    type?: "search" | undefined;
+    variant?: "in-context" | "global" | undefined;
+}, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/lib-esm/search-input/search-input.js

@@ -0,0 +1,95 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Search, XMark } from '@box/blueprint-web-assets/icons/Fill';
+import { IconIconOnLightSecondary, IconCtaIcon } from '@box/blueprint-web-assets/tokens/tokens';
+import clsx from 'clsx';
+import { forwardRef, useState, useCallback, Children } from 'react';
+import { IconButton } from '../primitives/icon-button/icon-button.js';
+import { switchCase } from '../utils/switchCase.js';
+import styles from './search.module.js';
+
+const AccessibleXMark = () => jsx(XMark, {
+  role: "presentation"
+});
+const AccessibleXMarkGlobal = () => jsx(XMark, {
+  height: "1.25rem",
+  role: "presentation",
+  width: "1.25rem"
+});
+const SearchInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    children,
+    className,
+    defaultValue = '',
+    disabled = false,
+    onChange,
+    onKeyDown,
+    onSubmit,
+    placeholder,
+    searchIconAriaLabel,
+    searchInputAriaLabel,
+    searchInputClearAriaLabel,
+    variant,
+    ...rest
+  } = props;
+  const [searchInputValue, setSearchInputValue] = useState(defaultValue);
+  const updateSearchValue = useCallback(value => {
+    setSearchInputValue(value);
+    onChange?.(value);
+  }, [onChange]);
+  const onSearchInputChanged = useCallback(event => {
+    updateSearchValue(event.target.value);
+  }, [updateSearchValue]);
+  const onClearInputButtonClicked = useCallback(() => {
+    updateSearchValue('');
+  }, [updateSearchValue]);
+  const onSubmitted = () => onSubmit?.(searchInputValue);
+  const onSearchInputKeyDown = e => {
+    if (disabled) {
+      return;
+    }
+    switchCase({
+      Enter: () => {
+        e.preventDefault();
+        onSubmit?.(searchInputValue);
+      },
+      Escape: () => {
+        e.preventDefault();
+        updateSearchValue('');
+      }
+    })(e.key)?.();
+    onKeyDown?.(e);
+  };
+  const isGlobal = variant === 'global';
+  const showActionButton = Children.count(children) > 0;
+  return jsxs("div", {
+    className: clsx(styles.search, className),
+    children: [jsx(Search, {
+      "aria-label": searchIconAriaLabel,
+      className: clsx(styles.searchIcon, isGlobal && styles.global),
+      color: IconIconOnLightSecondary
+    }), jsx("input", {
+      ...rest,
+      ref: forwardedRef,
+      "aria-label": searchInputAriaLabel,
+      className: clsx(styles.searchInput, isGlobal && styles.global, {
+        [styles.withoutActionButton]: isGlobal && !showActionButton
+      }),
+      disabled: disabled,
+      onChange: onSearchInputChanged,
+      onKeyDown: onSearchInputKeyDown,
+      onSubmit: onSubmitted,
+      placeholder: placeholder || '',
+      type: "search",
+      value: searchInputValue
+    }), !!searchInputValue && jsx(IconButton, {
+      "aria-label": searchInputClearAriaLabel,
+      className: clsx(styles.clearSearchIcon, isGlobal && styles.global, isGlobal && !showActionButton && styles.withoutActionButton),
+      color: IconCtaIcon,
+      icon: isGlobal ? AccessibleXMarkGlobal : AccessibleXMark,
+      onClick: onClearInputButtonClicked,
+      size: "x-small"
+    }), isGlobal && showActionButton && children]
+  });
+});
+
+export { SearchInput };

package/lib-esm/search-input/search.module.js

@@ -0,0 +1,4 @@
+import '../index.css';
+var styles = {"search":"search-module_search__j7vwN","searchIcon":"search-module_searchIcon__gK0a3","global":"search-module_global__G-z34","searchInput":"search-module_searchInput__yYJJB","firefoxDefaultOpacityFix":"search-module_firefoxDefaultOpacityFix__8EAEM","withoutActionButton":"search-module_withoutActionButton__EQVin","clearSearchIcon":"search-module_clearSearchIcon__MWn17","actionButton":"search-module_actionButton__uXaV3"};
+
+export { styles as default };

package/lib-esm/search-input/types.d.ts

@@ -0,0 +1,53 @@
+import type React from 'react';
+import { type IconButtonProps } from '../primitives/icon-button';
+import { type Modify } from '../types/modify';
+export type SearchInputProps = Modify<React.ComponentPropsWithRef<'input'>, {
+    className?: string;
+    /**
+     * Default value for search input.
+     *
+     * @default ""
+     */
+    defaultValue?: string;
+    /**
+     * Specifies enabled or disabled
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Handler that is called when the search value is changed.
+     */
+    onChange?: (searchInputValue: string) => void;
+    /**
+     * Handler that is called when the keyboard is pressed.
+     */
+    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    /**
+     * Handler that is called when the SearchInput is submitted.
+     */
+    onSubmit?: (searchInputValue: string) => void;
+    /**
+     * Search through site content icon aria-label.
+     */
+    searchIconAriaLabel: string;
+    /**
+     * Search through site content input aria-label.
+     */
+    searchInputAriaLabel: string;
+    /**
+     * Search through site content clear input button aria-label.
+     */
+    searchInputClearAriaLabel: string;
+    /**
+     * Input type, fixed to 'search'.
+     */
+    type?: 'search';
+    /**
+     * Specifies search input variant.
+     *
+     * @default "in-context"
+     */
+    variant?: 'in-context' | 'global';
+}>;
+export type SearchInputActionButtonProps = IconButtonProps;

package/lib-esm/select/index.d.ts

@@ -0,0 +1,2 @@
+export { Select } from './select';
+export { type SelectOptionProps, type SelectProps } from './types';

package/lib-esm/select/select.d.ts

@@ -0,0 +1,68 @@
+/// <reference types="react" />
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { type SelectContentProps, type SelectOptionProps } from './types';
+/**
+ * The root component that contains all the parts of a select.
+ *
+ * @example
+ * const [value, setValue] = React.useState('');
+ *
+ * const label = 'Select';
+ * const placeholder = 'Select an option';
+ *
+ * <Select label={label} onValueChange={setValue} placeholder={placeholder} value={value}>
+ *     <Select.Option text="Option 1" value="option-1" />
+ *     <Select.Option text="Option 2" value="option-2" />
+ *
+ *     <Select.Separator />
+ *
+ *     <Select.Option text="Option 3" value="option-3" />
+ *     <Select.Option text="Option 4" value="option-4" />
+ * </Select>
+ */
+export declare const Select: import("react").ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps, keyof {
+    label: string;
+    placeholder: string | JSX.Element;
+    children?: JSX.Element | undefined;
+    defaultValue?: string | undefined;
+    value?: string | undefined;
+    onValueChange?: ((value: string) => void) | undefined;
+    defaultOpen?: boolean | undefined;
+    open?: boolean | undefined;
+    onOpenChange?: ((open: boolean) => void) | undefined;
+    name?: string | undefined;
+    disabled?: boolean | undefined;
+    required?: boolean | undefined;
+    className?: string | undefined;
+    hideLabel?: boolean | undefined;
+    error?: import("react").ReactNode;
+}> & {
+    label: string;
+    placeholder: string | JSX.Element;
+    children?: JSX.Element | undefined;
+    defaultValue?: string | undefined;
+    value?: string | undefined;
+    onValueChange?: ((value: string) => void) | undefined;
+    defaultOpen?: boolean | undefined;
+    open?: boolean | undefined;
+    onOpenChange?: ((open: boolean) => void) | undefined;
+    name?: string | undefined;
+    disabled?: boolean | undefined;
+    required?: boolean | undefined;
+    className?: string | undefined;
+    hideLabel?: boolean | undefined;
+    error?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLButtonElement>> & {
+    /**
+     * The component that pops out when the select is open.
+     */
+    Content: import("react").ForwardRefExoticComponent<Omit<SelectContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    /**
+     * The component that displays a select option.
+     */
+    Option: import("react").ForwardRefExoticComponent<Omit<SelectOptionProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    /**
+     * The component used to visually separate options in the select.
+     */
+    Separator: import("react").ForwardRefExoticComponent<import("react").RefAttributes<HTMLHRElement>>;
+};

package/lib-esm/select/select.js

@@ -0,0 +1,187 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Caret, Checkmark } from '@box/blueprint-web-assets/icons/Fill';
+import { Label } from '@radix-ui/react-label';
+import * as ScrollArea from '@radix-ui/react-scroll-area';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import clsx from 'clsx';
+import { forwardRef, useCallback } from 'react';
+import { InlineError } from '../primitives/inline-error/inline-error.js';
+import { useUniqueId } from '../utils/useUniqueId.js';
+import styles from './select.module.js';
+
+const Root = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    // Other props
+    children,
+    className,
+    error,
+    hideLabel,
+    label,
+    placeholder,
+    // RadixSelect props
+    defaultValue,
+    value,
+    onValueChange,
+    defaultOpen,
+    open,
+    onOpenChange,
+    name,
+    disabled,
+    required,
+    // RadixSelectTrigger props
+    ...triggerProps
+  } = props;
+  const selectId = useUniqueId('select-');
+  const hasError = !!error && !disabled;
+  // Restrict consumers from opening options menu when Root is disabled
+  const isSelectDefaultOpen = defaultOpen && !disabled;
+  const isSelectOpen = open && !disabled;
+  const handleOnChange = isOpen => {
+    onOpenChange?.(isOpen);
+  };
+  const selectProps = {
+    name,
+    disabled,
+    required,
+    value,
+    defaultValue,
+    defaultOpen: isSelectDefaultOpen,
+    open: isSelectOpen,
+    onValueChange,
+    onOpenChange: handleOnChange
+  };
+  return jsxs("div", {
+    className: clsx(styles.container, {
+      [styles.disabled]: disabled
+    }, className),
+    children: [jsx(Label, {
+      className: styles.label,
+      hidden: hideLabel,
+      htmlFor: selectId,
+      children: label
+    }), jsxs(SelectPrimitive.Root, {
+      ...selectProps,
+      children: [jsxs(SelectPrimitive.Trigger, {
+        ...triggerProps,
+        ref: forwardedRef,
+        "aria-label": label,
+        ...(hasError && {
+          'aria-invalid': 'true'
+        }),
+        className: clsx(styles.triggerBtn, {
+          [styles.error]: hasError
+        }),
+        id: selectId,
+        children: [jsx(SelectPrimitive.Value, {
+          placeholder: placeholder
+        }), jsx(SelectPrimitive.Icon, {
+          className: styles.iconWrapper,
+          children: jsx(Caret, {
+            className: styles.icon
+          })
+        })]
+      }), children]
+    }), jsx(InlineError, {
+      className: styles.inlineError,
+      children: error
+    })]
+  });
+});
+Root.displayName = 'Select';
+const Content = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    children,
+    className,
+    container,
+    ...contentProps
+  } = props;
+  return jsx(SelectPrimitive.Portal, {
+    container: container,
+    children: jsx(SelectPrimitive.Content, {
+      ...contentProps,
+      ref: forwardedRef,
+      className: clsx(styles.content, className),
+      position: "popper",
+      sideOffset: 8,
+      children: jsx(ScrollArea.Root, {
+        type: "auto",
+        children: jsx(SelectPrimitive.Viewport, {
+          asChild: true,
+          className: styles.viewport,
+          children: jsx(ScrollArea.Viewport, {
+            children: children
+          })
+        })
+      })
+    })
+  });
+});
+Root.displayName = 'Select.Content';
+const Option = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    text,
+    secondaryText,
+    ...itemProps
+  } = props;
+  const onPointerLeave = useCallback(event => event.preventDefault(), []);
+  const onPointerMove = useCallback(event => event.preventDefault(), []);
+  return jsxs(SelectPrimitive.Item, {
+    ...itemProps,
+    ref: forwardedRef,
+    className: styles.option,
+    onPointerLeave: onPointerLeave,
+    onPointerMove: onPointerMove,
+    children: [jsx(SelectPrimitive.ItemText, {
+      children: text
+    }), !!secondaryText && jsx("span", {
+      className: styles.secondaryText,
+      children: secondaryText
+    }), !itemProps.disabled && jsx(SelectPrimitive.ItemIndicator, {
+      className: styles.indicator,
+      children: jsx(Checkmark, {})
+    })]
+  });
+});
+Option.displayName = 'Select.Option';
+const Separator = /*#__PURE__*/forwardRef((_, forwardedRef) => {
+  return jsx(SelectPrimitive.Separator, {
+    ref: forwardedRef,
+    className: styles.separator
+  });
+});
+Separator.displayName = 'Select.Separator';
+/**
+ * The root component that contains all the parts of a select.
+ *
+ * @example
+ * const [value, setValue] = React.useState('');
+ *
+ * const label = 'Select';
+ * const placeholder = 'Select an option';
+ *
+ * <Select label={label} onValueChange={setValue} placeholder={placeholder} value={value}>
+ *     <Select.Option text="Option 1" value="option-1" />
+ *     <Select.Option text="Option 2" value="option-2" />
+ *
+ *     <Select.Separator />
+ *
+ *     <Select.Option text="Option 3" value="option-3" />
+ *     <Select.Option text="Option 4" value="option-4" />
+ * </Select>
+ */
+const Select = Object.assign(Root, {
+  /**
+   * The component that pops out when the select is open.
+   */
+  Content,
+  /**
+   * The component that displays a select option.
+   */
+  Option,
+  /**
+   * The component used to visually separate options in the select.
+   */
+  Separator
+});
+
+export { Select };

package/lib-esm/select/select.module.js

@@ -0,0 +1,4 @@
+import '../index.css';
+var styles = {"container":"select-module_container__Z9-8Z","disabled":"select-module_disabled__Ec5ut","label":"select-module_label__D0YIV","triggerBtn":"select-module_triggerBtn__YH6We","error":"select-module_error__-XGym","iconWrapper":"select-module_iconWrapper__FO6aR","icon":"select-module_icon__uIkg5","content":"select-module_content__4za4x","viewport":"select-module_viewport__T-iIU","option":"select-module_option__A92Yv","secondaryText":"select-module_secondaryText__NNNnn","indicator":"select-module_indicator__bZge1","separator":"select-module_separator__NXjsU"};
+
+export { styles as default };

package/lib-esm/select/types.d.ts

@@ -0,0 +1,105 @@
+/// <reference types="react" />
+import { type SelectItemProps as RadixItemProps, type SelectContentProps as RadixSelectContentProps, type SelectProps as RadixSelectProps, type SelectTriggerProps as RadixSelectTriggerProps } from '@radix-ui/react-select';
+import { type Modify } from '../types/modify';
+type ExtraProps = {
+    /**
+     * The label for the select.
+     */
+    label: string;
+    /**
+     * The placeholder value displayed within the select trigger button when no values has been selected yet.
+     */
+    placeholder: string | JSX.Element;
+    /**
+     * Pass the select content using `<Select.Content />`.
+     */
+    children?: JSX.Element;
+    /**
+     * The value of the select when initially rendered. Use when you do not need to control the state of the select.
+     */
+    defaultValue?: RadixSelectProps['defaultValue'];
+    /**
+     * The controlled value of the select. Should be used in conjunction with `onValueChange`.
+     */
+    value?: RadixSelectProps['value'];
+    /**
+     * Event handler called when the value changes.
+     */
+    onValueChange?: RadixSelectProps['onValueChange'];
+    /**
+     * The open state of the select when it is initially rendered. Use when you do not need to control its open state.
+     */
+    defaultOpen?: RadixSelectProps['defaultOpen'];
+    /**
+     * The controlled open state of the select. Must be used in conjunction with `onOpenChange`.
+     */
+    open?: RadixSelectProps['open'];
+    /**
+     * Event handler called when the open state of the select changes.
+     */
+    onOpenChange?: RadixSelectProps['onOpenChange'];
+    /**
+     * The name of the select. Submitted with its owning form as part of a name/value pair.
+     */
+    name?: RadixSelectProps['name'];
+    /**
+     * When `true`, prevents the user from interacting with select.
+     */
+    disabled?: RadixSelectProps['disabled'];
+    /**
+     * When `true`, indicates that the user must select a value before the owning form can be submitted.
+     */
+    required?: RadixSelectProps['required'];
+    /**
+     * Extend the styles applied to the component.
+     */
+    className?: string;
+    /**
+     * When `true`, label text is hidden.
+     *
+     * @default false
+     */
+    hideLabel?: boolean;
+    /**
+     * The content of the error message.
+     */
+    error?: React.ReactNode;
+};
+export type SelectProps = Modify<RadixSelectTriggerProps, ExtraProps>;
+export interface SelectContentProps extends React.ComponentPropsWithRef<'div'> {
+    /**
+     * Pass the select options and separators using `<Select.Option />` and `<Select.Separator />`.
+     */
+    children: React.ReactNode;
+    /**
+     * The preferred alignment of the menu against the select button. May change when collisions occur.
+     *
+     * @default "start"
+     */
+    align?: RadixSelectContentProps['align'];
+    /**
+     * The DOM element where the COntent should be portal-ed into. If not provided, the Content will be appended to the document body.
+     */
+    container?: HTMLElement;
+}
+export interface SelectOptionProps extends React.ComponentPropsWithRef<'div'> {
+    /**
+     * The value given as data when submitted with a `name`.
+     */
+    value: RadixItemProps['value'];
+    /**
+     * When true, prevents the user from interacting with the item.
+     *
+     * @default false
+     */
+    disabled?: RadixItemProps['disabled'];
+    /**
+     * The primary text of the item.
+     */
+    text: string;
+    /**
+     * The secondary text of the item. Displayed on the right side.
+     */
+    secondaryText?: string;
+}
+export {};

package/lib-esm/side-panel/index.d.ts

@@ -0,0 +1,2 @@
+export { SidePanel } from './side-panel';
+export type { SidePanelProps } from './types';