@wistia/ui 0.4.8 → 0.4.9-beta.f08d243b.56e8ca2

package/dist/index.d.mts

@@ -1,9 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ReactNode, Dispatch, SetStateAction, ComponentPropsWithoutRef, JSX, ComponentPropsWithRef, MouseEvent, ChangeEvent, ForwardedRef, Ref, JSXElementConstructor, ElementType as ElementType$1, InputHTMLAttributes, RefObject } from 'react';
+import { ReactNode, Dispatch, SetStateAction, ComponentPropsWithoutRef, JSX, ComponentPropsWithRef, MouseEvent, ChangeEvent, ForwardedRef, Ref, JSXElementConstructor, ElementType as ElementType$1, InputHTMLAttributes, RefObject, ForwardRefExoticComponent, RefAttributes } from 'react';
 import { LinkProps as LinkProps$1 } from 'react-router-dom';
 import * as styled_components from 'styled-components';
 import { DropdownMenuContentProps, DropdownMenuItemProps, DropdownMenuRadioGroupProps, DropdownMenuRadioItemProps, DropdownMenuCheckboxItemProps } from '@radix-ui/react-dropdown-menu';
+import { ToggleGroupSingleProps } from '@radix-ui/react-toggle-group';
 
 type UIProviderProps = {
     children: ReactNode;
@@ -102,7 +103,7 @@ declare const ColorSchemeWrapper: {
 type ButtonVariants = 'ghost' | 'outline' | 'soft' | 'solid';
 
 type LinkTypes = 'default' | 'email' | 'external' | 'phone';
-type BaseProps = {
+type BaseProps$1 = {
     /**
      * A Promise to invoke before navigating to location.
      * _Caution: if used with `external` type prop a new window will **not** be opened_
@@ -122,6 +123,14 @@ type BaseProps = {
      * Disables the link
      */
     disabled?: boolean;
+    /**
+     * Icon to display on the left side of the link, Must be an instance of [Icon](?path=/docs/components-icon--docs)
+     */
+    leftIcon?: JSX.Element | undefined;
+    /**
+     * Icon to display on the right side of the link, Must be an instance of [Icon](?path=/docs/components-icon--docs)
+     */
+    rightIcon?: JSX.Element | undefined;
     /**
      * Type of link to display
      *
@@ -135,11 +144,11 @@ type BaseProps = {
      */
     underline?: boolean;
 };
-type LinkAsLinkProps = BaseProps & ComponentPropsWithRef<'a'> & Omit<LinkProps$1, 'to'> & {
+type LinkAsLinkProps = BaseProps$1 & ComponentPropsWithRef<'a'> & Omit<LinkProps$1, 'to'> & {
     href: string | undefined;
     type?: LinkTypes;
 };
-type LinkAsButtonProps = BaseProps & ComponentPropsWithRef<'button'> & {
+type LinkAsButtonProps = BaseProps$1 & ComponentPropsWithRef<'button'> & {
     href?: never;
     type?: 'button' | 'reset' | 'submit';
 };
@@ -280,7 +289,7 @@ declare const useWindowSize: (interval?: number) => {
 
 type ActionButtonProps = {
     /**
-     * The Icon component to use, e.g. `<Icon type="favorite" />`
+     * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`
      */
     icon: JSX.Element;
     /**
@@ -301,7 +310,7 @@ type ActionButtonProps = {
  */
 declare const ActionButton: react.ForwardRefExoticComponent<(Omit<{
     /**
-     * The Icon component to use, e.g. `<Icon type="favorite" />`
+     * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`
      */
     icon: JSX.Element;
     /**
@@ -316,9 +325,9 @@ declare const ActionButton: react.ForwardRefExoticComponent<(Omit<{
      * Changes the secondary icon for different use cases
      */
     variant?: "default" | "gated" | "menu-down" | "menu-up";
-} & Omit<ButtonAsButtonProps, "size" | "isLoading" | "leftIcon" | "fullWidth" | "unstyled" | "rightIcon" | "variant">, "ref"> | Omit<{
+} & Omit<ButtonAsButtonProps, "size" | "leftIcon" | "rightIcon" | "isLoading" | "fullWidth" | "unstyled" | "variant">, "ref"> | Omit<{
     /**
-     * The Icon component to use, e.g. `<Icon type="favorite" />`
+     * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`
      */
     icon: JSX.Element;
     /**
@@ -333,7 +342,7 @@ declare const ActionButton: react.ForwardRefExoticComponent<(Omit<{
      * Changes the secondary icon for different use cases
      */
     variant?: "default" | "gated" | "menu-down" | "menu-up";
-} & Omit<ButtonAsLinkProps, "size" | "isLoading" | "leftIcon" | "fullWidth" | "unstyled" | "rightIcon" | "variant">, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+} & Omit<ButtonAsLinkProps, "size" | "leftIcon" | "rightIcon" | "isLoading" | "fullWidth" | "unstyled" | "variant">, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 
 type AvatarInstanceType = 'image' | 'initials';
 type AvatarImageLoadStateType = 'error' | 'loaded' | 'loading';
@@ -696,7 +705,7 @@ type CheckboxProps = Omit<ComponentPropsWithRef<'label'>, 'onChange'> & {
      */
     name?: string | undefined;
     /**
-     * Callback function invoked when the checkbox value changes
+     * Callback function invoked when the value changes
      */
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
     /**
@@ -1242,7 +1251,7 @@ type IconButtonProps = {
      */
     label: string;
     /**
-     * The Icon component to use, e.g. `<Icon type="favorite" />`
+     * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`
      */
     children: JSX.Element;
 } & (Omit<ButtonAsButtonProps, 'fullWidth' | 'leftIcon' | 'rightIcon'> | Omit<ButtonAsLinkProps, 'fullWidth' | 'leftIcon' | 'rightIcon'>);
@@ -1256,19 +1265,19 @@ declare const IconButton: react.ForwardRefExoticComponent<(Omit<{
      */
     label: string;
     /**
-     * The Icon component to use, e.g. `<Icon type="favorite" />`
+     * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`
      */
     children: JSX.Element;
-} & Omit<ButtonAsButtonProps, "leftIcon" | "fullWidth" | "rightIcon">, "ref"> | Omit<{
+} & Omit<ButtonAsButtonProps, "leftIcon" | "rightIcon" | "fullWidth">, "ref"> | Omit<{
     /**
      * Accessible text for screen readers. Also shows up in a tooltip unless `disableTooltip` is true.
      */
     label: string;
     /**
-     * The Icon component to use, e.g. `<Icon type="favorite" />`
+     * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`
      */
     children: JSX.Element;
-} & Omit<ButtonAsLinkProps, "leftIcon" | "fullWidth" | "rightIcon">, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+} & Omit<ButtonAsLinkProps, "leftIcon" | "rightIcon" | "fullWidth">, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 
 type InputProps = Omit<InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>, 'type'> & {
     /**
@@ -2012,6 +2021,76 @@ declare const ScreenReaderOnly: {
     displayName: string;
 };
 
+type SegmentedControlProps = Omit<ToggleGroupSingleProps, 'type'> & {
+    /**
+     * `SegmentedControlItem`s that will be rendered in grouping
+     */
+    children?: ReactNode;
+    /**
+     * Set the entire `SegmentedControl` to be disabled
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Force `SegmentedControl` to fill the width of it's container
+     */
+    fullWidth?: boolean | undefined;
+    /**
+     * Callback function invoked when the value changes
+     */
+    onSelectedValueChange: (value: string) => void;
+    /**
+     * The value of the `SegmentedControlItem` which should be selected
+     */
+    selectedValue: string;
+};
+/**
+ * Provides a horizontal set of segments for switching between different values
+ */
+declare const SegmentedControl: ForwardRefExoticComponent<RefAttributes<HTMLDivElement> & SegmentedControlProps>;
+
+type BaseProps = {
+    /**
+     * Disable the `SegmentedControlItem`
+     */
+    disabled?: boolean | undefined;
+    /**
+     * The value of the item
+     */
+    value: string;
+};
+type IconWithLabel = {
+    /**
+     * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`
+     */
+    icon?: JSX.Element;
+    /**
+     * The label of the item
+     */
+    label?: ReactNode | string | undefined;
+    'aria-label'?: never;
+};
+type IconWithAriaLabel = {
+    /**
+     * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`
+     */
+    icon?: JSX.Element;
+    /**
+     * Use this when displaying an icon without a label
+     */
+    'aria-label'?: string | undefined;
+    label?: never;
+};
+type NoIcon = {
+    icon?: undefined;
+    /**
+     * The label of the item
+     */
+    label?: ReactNode | string | undefined;
+    'aria-label'?: never;
+};
+type SegmentedControlItemProps = BaseProps & (IconWithAriaLabel | IconWithLabel | NoIcon);
+declare const SegmentedControlItem: react.ForwardRefExoticComponent<SegmentedControlItemProps & react.RefAttributes<HTMLButtonElement>>;
+
 type StackProps = {
     /**
      * Optional children
@@ -2168,4 +2247,75 @@ declare const WistiaLogo: {
     displayName: string;
 };
 
-export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, Box, type BoxProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonProps, Card, type CardProps, Checkbox, CheckboxGroup, CheckboxMenuItem, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Divider, Ellipsis, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Input, type InputProps, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, Stack, SubMenu, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useBoolean, useFormState, useKey, useMq, useToast, useWindowSize };
+type SelectProps = {
+    /**
+     * Sets the validity status of the input
+     *
+     * @default false
+     */
+    'aria-invalid'?: boolean;
+    /**
+     * A group of `Option` or `OptionGroup`s
+     */
+    children: ReactNode;
+    colorScheme?: ColorSchemeTypes;
+    /**
+     * When true, the select can't be interacted with.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * If true, the select will fill its container
+     */
+    fullWidth?: ResponsiveObject<boolean> | boolean;
+    /**
+     * Called when a value is changed.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Text shown when no value is selected
+     */
+    placeholder?: string;
+    /**
+     * The controlled value. Must be used in conjunction with `onChange`.
+     */
+    value?: string;
+};
+/**
+ * Display a list of options and choose one of them. Replacement for the native Select HTML element.
+ */
+declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLButtonElement>>;
+
+type SelectOptionProps = {
+    /**
+     * The visual content of the select
+     */
+    children: ReactNode;
+    /**
+     * The value to set
+     */
+    value: string;
+    /**
+     * When true, this option will not be selectable
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Optional text used for typeahead purposes. By default the typeahead behavior will use the `.textContent` of the Option.
+     * Use this when the content is complex, or you have non-textual content inside.
+     */
+    textValue?: string;
+};
+declare const SelectOption: react.ForwardRefExoticComponent<SelectOptionProps & react.RefAttributes<HTMLDivElement>>;
+
+type SelectOptionGroupProps = {
+    /** The label of the group */
+    label: string;
+    /** At least one `Option` */
+    children: ReactNode;
+};
+declare const SelectOptionGroup: ({ children, label, ...props }: SelectOptionGroupProps) => react_jsx_runtime.JSX.Element;
+
+export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, Box, type BoxProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonProps, Card, type CardProps, Checkbox, CheckboxGroup, CheckboxMenuItem, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Divider, Ellipsis, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Input, type InputProps, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Stack, SubMenu, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useBoolean, useFormState, useKey, useMq, useToast, useWindowSize };

package/dist/index.d.ts

@@ -1,9 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ReactNode, Dispatch, SetStateAction, ComponentPropsWithoutRef, JSX, ComponentPropsWithRef, MouseEvent, ChangeEvent, ForwardedRef, Ref, JSXElementConstructor, ElementType as ElementType$1, InputHTMLAttributes, RefObject } from 'react';
+import { ReactNode, Dispatch, SetStateAction, ComponentPropsWithoutRef, JSX, ComponentPropsWithRef, MouseEvent, ChangeEvent, ForwardedRef, Ref, JSXElementConstructor, ElementType as ElementType$1, InputHTMLAttributes, RefObject, ForwardRefExoticComponent, RefAttributes } from 'react';
 import { LinkProps as LinkProps$1 } from 'react-router-dom';
 import * as styled_components from 'styled-components';
 import { DropdownMenuContentProps, DropdownMenuItemProps, DropdownMenuRadioGroupProps, DropdownMenuRadioItemProps, DropdownMenuCheckboxItemProps } from '@radix-ui/react-dropdown-menu';
+import { ToggleGroupSingleProps } from '@radix-ui/react-toggle-group';
 
 type UIProviderProps = {
     children: ReactNode;
@@ -102,7 +103,7 @@ declare const ColorSchemeWrapper: {
 type ButtonVariants = 'ghost' | 'outline' | 'soft' | 'solid';
 
 type LinkTypes = 'default' | 'email' | 'external' | 'phone';
-type BaseProps = {
+type BaseProps$1 = {
     /**
      * A Promise to invoke before navigating to location.
      * _Caution: if used with `external` type prop a new window will **not** be opened_
@@ -122,6 +123,14 @@ type BaseProps = {
      * Disables the link
      */
     disabled?: boolean;
+    /**
+     * Icon to display on the left side of the link, Must be an instance of [Icon](?path=/docs/components-icon--docs)
+     */
+    leftIcon?: JSX.Element | undefined;
+    /**
+     * Icon to display on the right side of the link, Must be an instance of [Icon](?path=/docs/components-icon--docs)
+     */
+    rightIcon?: JSX.Element | undefined;
     /**
      * Type of link to display
      *
@@ -135,11 +144,11 @@ type BaseProps = {
      */
     underline?: boolean;
 };
-type LinkAsLinkProps = BaseProps & ComponentPropsWithRef<'a'> & Omit<LinkProps$1, 'to'> & {
+type LinkAsLinkProps = BaseProps$1 & ComponentPropsWithRef<'a'> & Omit<LinkProps$1, 'to'> & {
     href: string | undefined;
     type?: LinkTypes;
 };
-type LinkAsButtonProps = BaseProps & ComponentPropsWithRef<'button'> & {
+type LinkAsButtonProps = BaseProps$1 & ComponentPropsWithRef<'button'> & {
     href?: never;
     type?: 'button' | 'reset' | 'submit';
 };
@@ -280,7 +289,7 @@ declare const useWindowSize: (interval?: number) => {
 
 type ActionButtonProps = {
     /**
-     * The Icon component to use, e.g. `<Icon type="favorite" />`
+     * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`
      */
     icon: JSX.Element;
     /**
@@ -301,7 +310,7 @@ type ActionButtonProps = {
  */
 declare const ActionButton: react.ForwardRefExoticComponent<(Omit<{
     /**
-     * The Icon component to use, e.g. `<Icon type="favorite" />`
+     * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`
      */
     icon: JSX.Element;
     /**
@@ -316,9 +325,9 @@ declare const ActionButton: react.ForwardRefExoticComponent<(Omit<{
      * Changes the secondary icon for different use cases
      */
     variant?: "default" | "gated" | "menu-down" | "menu-up";
-} & Omit<ButtonAsButtonProps, "size" | "isLoading" | "leftIcon" | "fullWidth" | "unstyled" | "rightIcon" | "variant">, "ref"> | Omit<{
+} & Omit<ButtonAsButtonProps, "size" | "leftIcon" | "rightIcon" | "isLoading" | "fullWidth" | "unstyled" | "variant">, "ref"> | Omit<{
     /**
-     * The Icon component to use, e.g. `<Icon type="favorite" />`
+     * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`
      */
     icon: JSX.Element;
     /**
@@ -333,7 +342,7 @@ declare const ActionButton: react.ForwardRefExoticComponent<(Omit<{
      * Changes the secondary icon for different use cases
      */
     variant?: "default" | "gated" | "menu-down" | "menu-up";
-} & Omit<ButtonAsLinkProps, "size" | "isLoading" | "leftIcon" | "fullWidth" | "unstyled" | "rightIcon" | "variant">, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+} & Omit<ButtonAsLinkProps, "size" | "leftIcon" | "rightIcon" | "isLoading" | "fullWidth" | "unstyled" | "variant">, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 
 type AvatarInstanceType = 'image' | 'initials';
 type AvatarImageLoadStateType = 'error' | 'loaded' | 'loading';
@@ -696,7 +705,7 @@ type CheckboxProps = Omit<ComponentPropsWithRef<'label'>, 'onChange'> & {
      */
     name?: string | undefined;
     /**
-     * Callback function invoked when the checkbox value changes
+     * Callback function invoked when the value changes
      */
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
     /**
@@ -1242,7 +1251,7 @@ type IconButtonProps = {
      */
     label: string;
     /**
-     * The Icon component to use, e.g. `<Icon type="favorite" />`
+     * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`
      */
     children: JSX.Element;
 } & (Omit<ButtonAsButtonProps, 'fullWidth' | 'leftIcon' | 'rightIcon'> | Omit<ButtonAsLinkProps, 'fullWidth' | 'leftIcon' | 'rightIcon'>);
@@ -1256,19 +1265,19 @@ declare const IconButton: react.ForwardRefExoticComponent<(Omit<{
      */
     label: string;
     /**
-     * The Icon component to use, e.g. `<Icon type="favorite" />`
+     * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`
      */
     children: JSX.Element;
-} & Omit<ButtonAsButtonProps, "leftIcon" | "fullWidth" | "rightIcon">, "ref"> | Omit<{
+} & Omit<ButtonAsButtonProps, "leftIcon" | "rightIcon" | "fullWidth">, "ref"> | Omit<{
     /**
      * Accessible text for screen readers. Also shows up in a tooltip unless `disableTooltip` is true.
      */
     label: string;
     /**
-     * The Icon component to use, e.g. `<Icon type="favorite" />`
+     * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`
      */
     children: JSX.Element;
-} & Omit<ButtonAsLinkProps, "leftIcon" | "fullWidth" | "rightIcon">, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+} & Omit<ButtonAsLinkProps, "leftIcon" | "rightIcon" | "fullWidth">, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 
 type InputProps = Omit<InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>, 'type'> & {
     /**
@@ -2012,6 +2021,76 @@ declare const ScreenReaderOnly: {
     displayName: string;
 };
 
+type SegmentedControlProps = Omit<ToggleGroupSingleProps, 'type'> & {
+    /**
+     * `SegmentedControlItem`s that will be rendered in grouping
+     */
+    children?: ReactNode;
+    /**
+     * Set the entire `SegmentedControl` to be disabled
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Force `SegmentedControl` to fill the width of it's container
+     */
+    fullWidth?: boolean | undefined;
+    /**
+     * Callback function invoked when the value changes
+     */
+    onSelectedValueChange: (value: string) => void;
+    /**
+     * The value of the `SegmentedControlItem` which should be selected
+     */
+    selectedValue: string;
+};
+/**
+ * Provides a horizontal set of segments for switching between different values
+ */
+declare const SegmentedControl: ForwardRefExoticComponent<RefAttributes<HTMLDivElement> & SegmentedControlProps>;
+
+type BaseProps = {
+    /**
+     * Disable the `SegmentedControlItem`
+     */
+    disabled?: boolean | undefined;
+    /**
+     * The value of the item
+     */
+    value: string;
+};
+type IconWithLabel = {
+    /**
+     * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`
+     */
+    icon?: JSX.Element;
+    /**
+     * The label of the item
+     */
+    label?: ReactNode | string | undefined;
+    'aria-label'?: never;
+};
+type IconWithAriaLabel = {
+    /**
+     * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`
+     */
+    icon?: JSX.Element;
+    /**
+     * Use this when displaying an icon without a label
+     */
+    'aria-label'?: string | undefined;
+    label?: never;
+};
+type NoIcon = {
+    icon?: undefined;
+    /**
+     * The label of the item
+     */
+    label?: ReactNode | string | undefined;
+    'aria-label'?: never;
+};
+type SegmentedControlItemProps = BaseProps & (IconWithAriaLabel | IconWithLabel | NoIcon);
+declare const SegmentedControlItem: react.ForwardRefExoticComponent<SegmentedControlItemProps & react.RefAttributes<HTMLButtonElement>>;
+
 type StackProps = {
     /**
      * Optional children
@@ -2168,4 +2247,75 @@ declare const WistiaLogo: {
     displayName: string;
 };
 
-export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, Box, type BoxProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonProps, Card, type CardProps, Checkbox, CheckboxGroup, CheckboxMenuItem, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Divider, Ellipsis, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Input, type InputProps, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, Stack, SubMenu, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useBoolean, useFormState, useKey, useMq, useToast, useWindowSize };
+type SelectProps = {
+    /**
+     * Sets the validity status of the input
+     *
+     * @default false
+     */
+    'aria-invalid'?: boolean;
+    /**
+     * A group of `Option` or `OptionGroup`s
+     */
+    children: ReactNode;
+    colorScheme?: ColorSchemeTypes;
+    /**
+     * When true, the select can't be interacted with.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * If true, the select will fill its container
+     */
+    fullWidth?: ResponsiveObject<boolean> | boolean;
+    /**
+     * Called when a value is changed.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Text shown when no value is selected
+     */
+    placeholder?: string;
+    /**
+     * The controlled value. Must be used in conjunction with `onChange`.
+     */
+    value?: string;
+};
+/**
+ * Display a list of options and choose one of them. Replacement for the native Select HTML element.
+ */
+declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLButtonElement>>;
+
+type SelectOptionProps = {
+    /**
+     * The visual content of the select
+     */
+    children: ReactNode;
+    /**
+     * The value to set
+     */
+    value: string;
+    /**
+     * When true, this option will not be selectable
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Optional text used for typeahead purposes. By default the typeahead behavior will use the `.textContent` of the Option.
+     * Use this when the content is complex, or you have non-textual content inside.
+     */
+    textValue?: string;
+};
+declare const SelectOption: react.ForwardRefExoticComponent<SelectOptionProps & react.RefAttributes<HTMLDivElement>>;
+
+type SelectOptionGroupProps = {
+    /** The label of the group */
+    label: string;
+    /** At least one `Option` */
+    children: ReactNode;
+};
+declare const SelectOptionGroup: ({ children, label, ...props }: SelectOptionGroupProps) => react_jsx_runtime.JSX.Element;
+
+export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, Box, type BoxProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonProps, Card, type CardProps, Checkbox, CheckboxGroup, CheckboxMenuItem, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Divider, Ellipsis, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Input, type InputProps, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Stack, SubMenu, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useBoolean, useFormState, useKey, useMq, useToast, useWindowSize };