@wistia/ui 0.1.0 → 0.1.2

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ReactNode, ComponentPropsWithoutRef, JSX, ComponentPropsWithRef, MouseEvent, ChangeEvent, ForwardedRef, Ref, JSXElementConstructor, ElementType as ElementType$1, InputHTMLAttributes } from 'react';
+import { ReactNode, ComponentPropsWithoutRef, JSX, ComponentPropsWithRef, MouseEvent, ChangeEvent, ForwardedRef, Ref, JSXElementConstructor, ElementType as ElementType$1, InputHTMLAttributes, RefObject } 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';
@@ -243,6 +243,63 @@ type AriaLiveContextType = {
 };
 declare const useAriaLive: () => AriaLiveContextType;
 
+type ActionButtonProps = {
+    /**
+     * The Icon component to use, e.g. `<Icon type="favorite" />`
+     */
+    icon: JSX.Element;
+    /**
+     * Disables the button
+     */
+    disabled?: boolean;
+    /**
+     * Set the [color scheme](../?path=/docs/docs-color-schemes--docs) of the `ActionButton` when hovered. By default, it will inherit the `colorScheme` prop.
+     */
+    hoverColorScheme?: ColorSchemeTypes;
+    /**
+     * Changes the secondary icon for different use cases
+     */
+    variant?: 'default' | 'gated' | 'menu-down' | 'menu-up';
+} & (Omit<ButtonAsButtonProps, 'fullWidth' | 'isLoading' | 'leftIcon' | 'rightIcon' | 'size' | 'unstyled' | 'variant'> | Omit<ButtonAsLinkProps, 'fullWidth' | 'isLoading' | 'leftIcon' | 'rightIcon' | 'size' | 'unstyled' | 'variant'>);
+/**
+ * Action Button component is used as one of a group of main actions on the page.
+ */
+declare const ActionButton: react.ForwardRefExoticComponent<(Omit<{
+    /**
+     * The Icon component to use, e.g. `<Icon type="favorite" />`
+     */
+    icon: JSX.Element;
+    /**
+     * Disables the button
+     */
+    disabled?: boolean;
+    /**
+     * Set the [color scheme](../?path=/docs/docs-color-schemes--docs) of the `ActionButton` when hovered. By default, it will inherit the `colorScheme` prop.
+     */
+    hoverColorScheme?: ColorSchemeTypes;
+    /**
+     * 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<{
+    /**
+     * The Icon component to use, e.g. `<Icon type="favorite" />`
+     */
+    icon: JSX.Element;
+    /**
+     * Disables the button
+     */
+    disabled?: boolean;
+    /**
+     * Set the [color scheme](../?path=/docs/docs-color-schemes--docs) of the `ActionButton` when hovered. By default, it will inherit the `colorScheme` prop.
+     */
+    hoverColorScheme?: ColorSchemeTypes;
+    /**
+     * 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>>;
+
 type AvatarInstanceType = 'image' | 'initials';
 type AvatarProps = ComponentPropsWithoutRef<'div'> & {
     /**
@@ -1037,6 +1094,70 @@ declare const IconButton: react.ForwardRefExoticComponent<(Omit<{
     children: JSX.Element;
 } & Omit<ButtonAsLinkProps, "leftIcon" | "fullWidth" | "rightIcon">, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 
+type InputProps = Omit<InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>, 'type'> & {
+    /**
+     * Sets the validity status of the input
+     */
+    'aria-invalid'?: boolean;
+    /**
+     * Set the disabled state of the input
+     */
+    disabled?: boolean;
+    /**
+     * If true, the input will fill the width of its parent
+     */
+    fullWidth?: boolean;
+    /**
+     * If true, the input will use a monospace font
+     */
+    monospace?: boolean;
+    /**
+     * Icon to display on the left side of the input, Must be an instance of [Icon](?path=/docs/components-icon--docs)
+     */
+    leftIcon?: JSX.Element | undefined;
+    /**
+     * Icon to display on the right side of the input, Must be an instance of [Icon](?path=/docs/components-icon--docs)
+     */
+    rightIcon?: JSX.Element | undefined;
+    /**
+     * The type of the input
+     */
+    type?: 'email' | 'multiline' | 'number' | 'phone' | 'search' | 'text' | 'url';
+};
+/**
+ * Component description goes here
+ */
+declare const Input: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>, "type"> & {
+    /**
+     * Sets the validity status of the input
+     */
+    'aria-invalid'?: boolean;
+    /**
+     * Set the disabled state of the input
+     */
+    disabled?: boolean;
+    /**
+     * If true, the input will fill the width of its parent
+     */
+    fullWidth?: boolean;
+    /**
+     * If true, the input will use a monospace font
+     */
+    monospace?: boolean;
+    /**
+     * Icon to display on the left side of the input, Must be an instance of [Icon](?path=/docs/components-icon--docs)
+     */
+    leftIcon?: JSX.Element | undefined;
+    /**
+     * Icon to display on the right side of the input, Must be an instance of [Icon](?path=/docs/components-icon--docs)
+     */
+    rightIcon?: JSX.Element | undefined;
+    /**
+     * The type of the input
+     */
+    type?: "email" | "multiline" | "number" | "phone" | "search" | "text" | "url";
+} & react.RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
+
 type LabelProps = ComponentPropsWithoutRef<'label'> & {
     /**
      * Pass an arbitrary child node
@@ -1508,6 +1629,91 @@ declare const CheckboxMenuItem: {
     displayName: string;
 };
 
+type ModalProps = ComponentPropsWithoutRef<'div'> & {
+    /**
+     * The content of the modal.
+     */
+    children: ReactNode;
+    /**
+     * Whether or not the modal should take up the full height of the viewport
+     */
+    fullHeight?: boolean;
+    /**
+     * Ref to the element that should receive focus when the modal opens
+     */
+    initialFocusRef?: RefObject<HTMLElement>;
+    /**
+     * Determines if the modal is currently open
+     */
+    isOpen: boolean;
+    /**
+     * Determines if the close button is visible (if false, `esc` will still close the Modal)
+     */
+    hideCloseButton?: boolean;
+    /**
+     * Determines if the title is visible
+     */
+    hideTitle?: boolean;
+    /**
+     * When the Modal is dismissed, this function will be called. You'll typically want to set the
+     * state of `isOpen` to false here
+     */
+    onRequestClose?: () => void;
+    /**
+     * The title for the modal. If you want to hide the title, set the `hideTitle` prop to `true`
+     * and the title will be hidden but still accessible to screen readers.
+     */
+    title: string;
+    /**
+     * The base width to apply to the Modal
+     */
+    width?: string;
+};
+/**
+ * A Modal is a focused UI element that appears atop the main interface, requiring
+ * user interaction or dismissal before returning to the underlying content.
+ */
+declare const Modal: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    /**
+     * The content of the modal.
+     */
+    children: ReactNode;
+    /**
+     * Whether or not the modal should take up the full height of the viewport
+     */
+    fullHeight?: boolean;
+    /**
+     * Ref to the element that should receive focus when the modal opens
+     */
+    initialFocusRef?: RefObject<HTMLElement>;
+    /**
+     * Determines if the modal is currently open
+     */
+    isOpen: boolean;
+    /**
+     * Determines if the close button is visible (if false, `esc` will still close the Modal)
+     */
+    hideCloseButton?: boolean;
+    /**
+     * Determines if the title is visible
+     */
+    hideTitle?: boolean;
+    /**
+     * When the Modal is dismissed, this function will be called. You'll typically want to set the
+     * state of `isOpen` to false here
+     */
+    onRequestClose?: () => void;
+    /**
+     * The title for the modal. If you want to hide the title, set the `hideTitle` prop to `true`
+     * and the title will be hidden but still accessible to screen readers.
+     */
+    title: string;
+    /**
+     * The base width to apply to the Modal
+     */
+    width?: string;
+} & react.RefAttributes<HTMLDivElement>>;
+
 type RadioProps = ComponentPropsWithoutRef<'input'> & {
     /**
      * Indicates the state of the radio
@@ -1770,68 +1976,4 @@ declare const WistiaLogo: {
     displayName: string;
 };
 
-type InputProps = Omit<InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>, 'type'> & {
-    /**
-     * Sets the validity status of the input
-     */
-    'aria-invalid'?: boolean;
-    /**
-     * Set the disabled state of the input
-     */
-    disabled?: boolean;
-    /**
-     * If true, the input will fill the width of its parent
-     */
-    fullWidth?: boolean;
-    /**
-     * If true, the input will use a monospace font
-     */
-    monospace?: boolean;
-    /**
-     * Icon to display on the left side of the input, Must be an instance of [Icon](?path=/docs/components-icon--docs)
-     */
-    leftIcon?: JSX.Element | undefined;
-    /**
-     * Icon to display on the right side of the input, Must be an instance of [Icon](?path=/docs/components-icon--docs)
-     */
-    rightIcon?: JSX.Element | undefined;
-    /**
-     * The type of the input
-     */
-    type?: 'email' | 'multiline' | 'number' | 'phone' | 'search' | 'text' | 'url';
-};
-/**
- * Component description goes here
- */
-declare const Input: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>, "type"> & {
-    /**
-     * Sets the validity status of the input
-     */
-    'aria-invalid'?: boolean;
-    /**
-     * Set the disabled state of the input
-     */
-    disabled?: boolean;
-    /**
-     * If true, the input will fill the width of its parent
-     */
-    fullWidth?: boolean;
-    /**
-     * If true, the input will use a monospace font
-     */
-    monospace?: boolean;
-    /**
-     * Icon to display on the left side of the input, Must be an instance of [Icon](?path=/docs/components-icon--docs)
-     */
-    leftIcon?: JSX.Element | undefined;
-    /**
-     * Icon to display on the right side of the input, Must be an instance of [Icon](?path=/docs/components-icon--docs)
-     */
-    rightIcon?: JSX.Element | undefined;
-    /**
-     * The type of the input
-     */
-    type?: "email" | "multiline" | "number" | "phone" | "search" | "text" | "url";
-} & react.RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
-
-export { Avatar, type AvatarInstanceType, type AvatarProps, Badge, type BadgeProps, Box, type BoxProps, Button, ButtonGroup, type ButtonProps, 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, 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, useFormState, useMq, useToast, useWindowSize };
+export { ActionButton, type ActionButtonProps, Avatar, type AvatarInstanceType, type AvatarProps, Badge, type BadgeProps, Box, type BoxProps, Button, ButtonGroup, type ButtonProps, 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, useFormState, useMq, useToast, useWindowSize };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ReactNode, ComponentPropsWithoutRef, JSX, ComponentPropsWithRef, MouseEvent, ChangeEvent, ForwardedRef, Ref, JSXElementConstructor, ElementType as ElementType$1, InputHTMLAttributes } from 'react';
+import { ReactNode, ComponentPropsWithoutRef, JSX, ComponentPropsWithRef, MouseEvent, ChangeEvent, ForwardedRef, Ref, JSXElementConstructor, ElementType as ElementType$1, InputHTMLAttributes, RefObject } 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';
@@ -243,6 +243,63 @@ type AriaLiveContextType = {
 };
 declare const useAriaLive: () => AriaLiveContextType;
 
+type ActionButtonProps = {
+    /**
+     * The Icon component to use, e.g. `<Icon type="favorite" />`
+     */
+    icon: JSX.Element;
+    /**
+     * Disables the button
+     */
+    disabled?: boolean;
+    /**
+     * Set the [color scheme](../?path=/docs/docs-color-schemes--docs) of the `ActionButton` when hovered. By default, it will inherit the `colorScheme` prop.
+     */
+    hoverColorScheme?: ColorSchemeTypes;
+    /**
+     * Changes the secondary icon for different use cases
+     */
+    variant?: 'default' | 'gated' | 'menu-down' | 'menu-up';
+} & (Omit<ButtonAsButtonProps, 'fullWidth' | 'isLoading' | 'leftIcon' | 'rightIcon' | 'size' | 'unstyled' | 'variant'> | Omit<ButtonAsLinkProps, 'fullWidth' | 'isLoading' | 'leftIcon' | 'rightIcon' | 'size' | 'unstyled' | 'variant'>);
+/**
+ * Action Button component is used as one of a group of main actions on the page.
+ */
+declare const ActionButton: react.ForwardRefExoticComponent<(Omit<{
+    /**
+     * The Icon component to use, e.g. `<Icon type="favorite" />`
+     */
+    icon: JSX.Element;
+    /**
+     * Disables the button
+     */
+    disabled?: boolean;
+    /**
+     * Set the [color scheme](../?path=/docs/docs-color-schemes--docs) of the `ActionButton` when hovered. By default, it will inherit the `colorScheme` prop.
+     */
+    hoverColorScheme?: ColorSchemeTypes;
+    /**
+     * 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<{
+    /**
+     * The Icon component to use, e.g. `<Icon type="favorite" />`
+     */
+    icon: JSX.Element;
+    /**
+     * Disables the button
+     */
+    disabled?: boolean;
+    /**
+     * Set the [color scheme](../?path=/docs/docs-color-schemes--docs) of the `ActionButton` when hovered. By default, it will inherit the `colorScheme` prop.
+     */
+    hoverColorScheme?: ColorSchemeTypes;
+    /**
+     * 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>>;
+
 type AvatarInstanceType = 'image' | 'initials';
 type AvatarProps = ComponentPropsWithoutRef<'div'> & {
     /**
@@ -1037,6 +1094,70 @@ declare const IconButton: react.ForwardRefExoticComponent<(Omit<{
     children: JSX.Element;
 } & Omit<ButtonAsLinkProps, "leftIcon" | "fullWidth" | "rightIcon">, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 
+type InputProps = Omit<InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>, 'type'> & {
+    /**
+     * Sets the validity status of the input
+     */
+    'aria-invalid'?: boolean;
+    /**
+     * Set the disabled state of the input
+     */
+    disabled?: boolean;
+    /**
+     * If true, the input will fill the width of its parent
+     */
+    fullWidth?: boolean;
+    /**
+     * If true, the input will use a monospace font
+     */
+    monospace?: boolean;
+    /**
+     * Icon to display on the left side of the input, Must be an instance of [Icon](?path=/docs/components-icon--docs)
+     */
+    leftIcon?: JSX.Element | undefined;
+    /**
+     * Icon to display on the right side of the input, Must be an instance of [Icon](?path=/docs/components-icon--docs)
+     */
+    rightIcon?: JSX.Element | undefined;
+    /**
+     * The type of the input
+     */
+    type?: 'email' | 'multiline' | 'number' | 'phone' | 'search' | 'text' | 'url';
+};
+/**
+ * Component description goes here
+ */
+declare const Input: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>, "type"> & {
+    /**
+     * Sets the validity status of the input
+     */
+    'aria-invalid'?: boolean;
+    /**
+     * Set the disabled state of the input
+     */
+    disabled?: boolean;
+    /**
+     * If true, the input will fill the width of its parent
+     */
+    fullWidth?: boolean;
+    /**
+     * If true, the input will use a monospace font
+     */
+    monospace?: boolean;
+    /**
+     * Icon to display on the left side of the input, Must be an instance of [Icon](?path=/docs/components-icon--docs)
+     */
+    leftIcon?: JSX.Element | undefined;
+    /**
+     * Icon to display on the right side of the input, Must be an instance of [Icon](?path=/docs/components-icon--docs)
+     */
+    rightIcon?: JSX.Element | undefined;
+    /**
+     * The type of the input
+     */
+    type?: "email" | "multiline" | "number" | "phone" | "search" | "text" | "url";
+} & react.RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
+
 type LabelProps = ComponentPropsWithoutRef<'label'> & {
     /**
      * Pass an arbitrary child node
@@ -1508,6 +1629,91 @@ declare const CheckboxMenuItem: {
     displayName: string;
 };
 
+type ModalProps = ComponentPropsWithoutRef<'div'> & {
+    /**
+     * The content of the modal.
+     */
+    children: ReactNode;
+    /**
+     * Whether or not the modal should take up the full height of the viewport
+     */
+    fullHeight?: boolean;
+    /**
+     * Ref to the element that should receive focus when the modal opens
+     */
+    initialFocusRef?: RefObject<HTMLElement>;
+    /**
+     * Determines if the modal is currently open
+     */
+    isOpen: boolean;
+    /**
+     * Determines if the close button is visible (if false, `esc` will still close the Modal)
+     */
+    hideCloseButton?: boolean;
+    /**
+     * Determines if the title is visible
+     */
+    hideTitle?: boolean;
+    /**
+     * When the Modal is dismissed, this function will be called. You'll typically want to set the
+     * state of `isOpen` to false here
+     */
+    onRequestClose?: () => void;
+    /**
+     * The title for the modal. If you want to hide the title, set the `hideTitle` prop to `true`
+     * and the title will be hidden but still accessible to screen readers.
+     */
+    title: string;
+    /**
+     * The base width to apply to the Modal
+     */
+    width?: string;
+};
+/**
+ * A Modal is a focused UI element that appears atop the main interface, requiring
+ * user interaction or dismissal before returning to the underlying content.
+ */
+declare const Modal: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    /**
+     * The content of the modal.
+     */
+    children: ReactNode;
+    /**
+     * Whether or not the modal should take up the full height of the viewport
+     */
+    fullHeight?: boolean;
+    /**
+     * Ref to the element that should receive focus when the modal opens
+     */
+    initialFocusRef?: RefObject<HTMLElement>;
+    /**
+     * Determines if the modal is currently open
+     */
+    isOpen: boolean;
+    /**
+     * Determines if the close button is visible (if false, `esc` will still close the Modal)
+     */
+    hideCloseButton?: boolean;
+    /**
+     * Determines if the title is visible
+     */
+    hideTitle?: boolean;
+    /**
+     * When the Modal is dismissed, this function will be called. You'll typically want to set the
+     * state of `isOpen` to false here
+     */
+    onRequestClose?: () => void;
+    /**
+     * The title for the modal. If you want to hide the title, set the `hideTitle` prop to `true`
+     * and the title will be hidden but still accessible to screen readers.
+     */
+    title: string;
+    /**
+     * The base width to apply to the Modal
+     */
+    width?: string;
+} & react.RefAttributes<HTMLDivElement>>;
+
 type RadioProps = ComponentPropsWithoutRef<'input'> & {
     /**
      * Indicates the state of the radio
@@ -1770,68 +1976,4 @@ declare const WistiaLogo: {
     displayName: string;
 };
 
-type InputProps = Omit<InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>, 'type'> & {
-    /**
-     * Sets the validity status of the input
-     */
-    'aria-invalid'?: boolean;
-    /**
-     * Set the disabled state of the input
-     */
-    disabled?: boolean;
-    /**
-     * If true, the input will fill the width of its parent
-     */
-    fullWidth?: boolean;
-    /**
-     * If true, the input will use a monospace font
-     */
-    monospace?: boolean;
-    /**
-     * Icon to display on the left side of the input, Must be an instance of [Icon](?path=/docs/components-icon--docs)
-     */
-    leftIcon?: JSX.Element | undefined;
-    /**
-     * Icon to display on the right side of the input, Must be an instance of [Icon](?path=/docs/components-icon--docs)
-     */
-    rightIcon?: JSX.Element | undefined;
-    /**
-     * The type of the input
-     */
-    type?: 'email' | 'multiline' | 'number' | 'phone' | 'search' | 'text' | 'url';
-};
-/**
- * Component description goes here
- */
-declare const Input: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>, "type"> & {
-    /**
-     * Sets the validity status of the input
-     */
-    'aria-invalid'?: boolean;
-    /**
-     * Set the disabled state of the input
-     */
-    disabled?: boolean;
-    /**
-     * If true, the input will fill the width of its parent
-     */
-    fullWidth?: boolean;
-    /**
-     * If true, the input will use a monospace font
-     */
-    monospace?: boolean;
-    /**
-     * Icon to display on the left side of the input, Must be an instance of [Icon](?path=/docs/components-icon--docs)
-     */
-    leftIcon?: JSX.Element | undefined;
-    /**
-     * Icon to display on the right side of the input, Must be an instance of [Icon](?path=/docs/components-icon--docs)
-     */
-    rightIcon?: JSX.Element | undefined;
-    /**
-     * The type of the input
-     */
-    type?: "email" | "multiline" | "number" | "phone" | "search" | "text" | "url";
-} & react.RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
-
-export { Avatar, type AvatarInstanceType, type AvatarProps, Badge, type BadgeProps, Box, type BoxProps, Button, ButtonGroup, type ButtonProps, 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, 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, useFormState, useMq, useToast, useWindowSize };
+export { ActionButton, type ActionButtonProps, Avatar, type AvatarInstanceType, type AvatarProps, Badge, type BadgeProps, Box, type BoxProps, Button, ButtonGroup, type ButtonProps, 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, useFormState, useMq, useToast, useWindowSize };