widenarrow-ui 2.3.8 → 2.4.1

package/lib/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import react__default, { CSSProperties, ReactElement, MouseEvent, RefObject, ReactNode, ChangeEvent, KeyboardEvent, FocusEvent, FC, AriaAttributes } from 'react';
+import react__default, { CSSProperties, RefObject, ReactElement, MouseEvent, ReactNode, ChangeEvent, KeyboardEvent, FocusEvent, FC, AriaAttributes } from 'react';
 import { Placement, PositioningStrategy } from '@popperjs/core';
 
 interface AnimatedCountProps {
@@ -118,6 +118,7 @@ declare enum IconTypes {
     FOLDER_300 = "iconFolder300",
     FOLDER_FILLED = "iconFolderFilled",
     FORMAT_CODE = "iconFormatCode",
+    FORMAT_COLOR_RESET = "iconFormatColorReset",
     FORMAT_FONT_SIZE = "iconFormatFontSize",
     FORMAT_IMAGE_BOTTOM = "iconFormatImgBottom",
     FORMAT_IMAGE_CENTER_CENTER = "iconFormatImgCenterCenter",
@@ -456,10 +457,12 @@ interface BadgeProps {
     onRemoveCallback?: (badgeItem: BadgeItem) => void;
     /** Accessible name and tooltip for the remove button. Set it whenever `onRemoveCallback` is. */
     removeLabel?: string;
+    /** Ref to the remove button, e.g. to move focus to it. Only set while `onRemoveCallback` is. */
+    removeButtonRef?: RefObject<HTMLButtonElement>;
 }
 
 declare const Badge: {
-    ({ badgeItem, className, displayAll, leftIcon, maxWidth, style, onClickCallback, onRemoveCallback, removeLabel }: BadgeProps): JSX.Element;
+    ({ badgeItem, className, displayAll, leftIcon, maxWidth, style, onClickCallback, onRemoveCallback, removeLabel, removeButtonRef }: BadgeProps): JSX.Element;
     displayName: string;
 };
 
@@ -655,6 +658,251 @@ interface CheckboxProps {
 
 declare const Checkbox: FC<CheckboxProps>;
 
+interface NoDataMessageProps {
+    id?: string;
+    className?: string;
+    icon?: Partial<IconTypes>;
+    title?: string;
+    message?: string;
+    /** @default false */
+    absoluteCenter?: boolean;
+    customLink?: ReactNode;
+    button?: {
+        onClickCallback: () => void;
+        text: string;
+        icon: Partial<IconTypes>;
+    };
+}
+
+interface OptionItem {
+    /** Visible label of the option. */
+    text: string;
+    /**
+     * Value passed to `onChange` when the option is picked, as is. With `nativeHtmlComponent` it is
+     * reported as a string instead, so a numeric `value` comes back as e.g. `'2'`.
+     */
+    value: string | number;
+    /** Renders the option but prevents it from being picked. @default false */
+    disabled?: boolean;
+    /**
+     * Second line of smaller text under `text`, e.g. a status or a location. Not shown with
+     * `nativeHtmlComponent`.
+     */
+    description?: string;
+}
+interface SelectInputProps {
+    /** Options to choose from, in display order. */
+    options: Array<OptionItem>;
+    /**
+     * Value of the selected option, matched against each option's `value`. The select is controlled:
+     * hold the value yourself and update it from `onChange`.
+     */
+    value: string | number;
+    /**
+     * Called with the picked option's `value`, rather than the change event. Not called when picking the
+     * option that is already selected. With `nativeHtmlComponent` the value is passed as a string
+     * (`'2'` for `value: 2`).
+     */
+    onChange: (value: string | number) => void;
+    /** Visible label, associated with the select. Also its accessible name unless `ariaLabel` is set. */
+    label?: string;
+    /** Show the `label`. When false the label is hidden, but the select still uses it as its accessible name. @default true */
+    withLabel?: boolean;
+    /** Accessible name for the select. Falls back to `label`. */
+    ariaLabel?: string;
+    /**
+     * Placeholder rendered as a first, empty option with value `''`. Pass it when the select may have no
+     * value yet, e.g. `'Choose a language'`.
+     */
+    defaultOption?: string;
+    /** Hint rendered below the select. */
+    helperText?: string;
+    /** Error message rendered below the select. Also gives the select a red border. */
+    error?: string;
+    /** Disables the select and dims the whole field. @default false */
+    disabled?: boolean;
+    /** Shows a spinner and disables the select, e.g. while its options are being fetched. @default false */
+    loading?: boolean;
+    /**
+     * Render a real `<select>` instead of the custom list, e.g. to get the platform's own option picker
+     * on touch devices, or a ref to the `<select>` through `inputRef`. The native select reports values
+     * to `onChange` as strings.
+     * @default false
+     */
+    nativeHtmlComponent?: boolean;
+    /** Size from the smallest breakpoint up. @default SizeTypes.MEDIUM */
+    size?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
+    /** Size from the `$md` breakpoint up, overriding `size`. */
+    sizeMd?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
+    /** Size from the `$lg` breakpoint up, overriding `size` and `sizeMd`. */
+    sizeLg?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
+    /** Size from the `$xl` breakpoint up, overriding the smaller sizes. */
+    sizeXl?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
+    /** Adds bottom spacing, for stacking fields in a form. @default false */
+    marginBottom?: boolean;
+    /** Focus the select on mount. @default false */
+    autoFocus?: boolean;
+    /** Id of the select, used to associate the label. Generated when omitted. */
+    id?: string;
+    /** Name of the select, for native form submission. */
+    name?: string;
+    /** Ref to the underlying `<select>`. Only with `nativeHtmlComponent`. */
+    inputRef?: RefObject<HTMLSelectElement>;
+    /** Class name of the outer container. */
+    className?: string;
+    /** Class name of the button that opens the list, or of the `<select>` with `nativeHtmlComponent`. */
+    inputClassName?: string;
+    /** @deprecated Not used by the component. */
+    text?: string;
+}
+
+/** Why the text in the Combobox's input changed. */
+type ComboboxInputChangeReason = 
+/** The user typed. */
+'input'
+/** The text was set back to the selected option's label, e.g. after picking an option or leaving the field. */
+ | 'reset'
+/** The clear button was used. */
+ | 'clear';
+type ComboboxValue = string | number;
+interface ComboboxBaseProps {
+    /** Options to choose from, in display order. Filtered by the typed text, unless `filterOptions` is false. */
+    options: Array<OptionItem>;
+    /**
+     * The options of the selected values, for their labels while they are not among `options`, e.g. a
+     * saved value before its page of options is fetched, or a value picked from an earlier search.
+     */
+    selectedOptions?: Array<OptionItem>;
+    /**
+     * Text in the input, to control it, e.g. to fetch options for it. Without it the Combobox keeps the
+     * text itself. When controlled, update it from `onInputChange`.
+     */
+    inputValue?: string;
+    /**
+     * Called when the text in the input changes. Fetch new options for reason `'input'` only: `'reset'`
+     * and `'clear'` set the text to the selected option's label or empty it.
+     */
+    onInputChange?: (inputValue: string, reason: ComboboxInputChangeReason) => void;
+    /**
+     * Filters the options by the typed text. By default an option is shown when its `text` contains the
+     * typed text, ignoring case. Pass `false` when the options are already filtered, e.g. fetched for the
+     * typed text from a server.
+     */
+    filterOptions?: ((options: OptionItem[], inputValue: string) => OptionItem[]) | false;
+    /** Visible label, associated with the input. Also its accessible name unless `ariaLabel` is set. */
+    label?: string;
+    /** Show the `label`. When false the label is hidden, but the input still uses it as its accessible name. @default true */
+    withLabel?: boolean;
+    /** Accessible name for the input. Falls back to `label`. */
+    ariaLabel?: string;
+    /** Text shown in the empty input, e.g. `'Search for portals'`. */
+    placeholder?: string;
+    /** Hint rendered below the input. */
+    helperText?: string;
+    /** Error message rendered below the input. Also gives the input a red border. */
+    error?: string;
+    /** Disables the Combobox and dims the whole field. @default false */
+    disabled?: boolean;
+    /**
+     * Shows a spinner in place of the chevron, e.g. while fetching options for the typed text. Unlike in
+     * SelectInput, the input stays editable, so typing can continue. The list stays closed until there
+     * are options to show. @default false
+     */
+    loading?: boolean;
+    /**
+     * Shown in the list when no option matches the typed text and `loading` is false, as in SortableTable.
+     * Without it, the list closes when nothing matches.
+     */
+    noDataMessage?: Pick<NoDataMessageProps, 'title' | 'icon' | 'message'>;
+    /**
+     * There are more options than `options` holds. The Combobox then calls `onLoadMoreCallback` when the
+     * end of the list scrolls into view, or the keyboard reaches its last option. @default false
+     */
+    hasMoreOptions?: boolean;
+    /**
+     * Called for the next options while `hasMoreOptions` and not `loading`. Append them to `options`, set
+     * `loading` while fetching, and `hasMoreOptions` to false after the last ones or a failed fetch.
+     */
+    onLoadMoreCallback?: () => void;
+    /**
+     * Let the value be cleared: with a button while there is one, and for a single value also by deleting
+     * all text in the input. Without it, a value can only be replaced by another. @default true
+     */
+    withClearButton?: boolean;
+    /** Accessible name of the clear button. @default 'Clear' */
+    clearButtonAriaLabel?: string;
+    /** Accessible name of the button that opens and closes the list. @default 'Show options' */
+    toggleButtonAriaLabel?: string;
+    /**
+     * Colours the input like a Button of that type, e.g. to use the Combobox as a picker in a toolbar.
+     * The list is not affected. Without it, the input looks like the other form fields.
+     */
+    type?: HierarchyTypes.PRIMARY | HierarchyTypes.SECONDARY;
+    /** Size from the smallest breakpoint up. @default SizeTypes.MEDIUM */
+    size?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
+    /** Size from the `$md` breakpoint up, overriding `size`. */
+    sizeMd?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
+    /** Size from the `$lg` breakpoint up, overriding `size` and `sizeMd`. */
+    sizeLg?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
+    /** Size from the `$xl` breakpoint up, overriding the smaller sizes. */
+    sizeXl?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
+    /** Adds bottom spacing, for stacking fields in a form. @default false */
+    marginBottom?: boolean;
+    /** Focus the input on mount. @default false */
+    autoFocus?: boolean;
+    /** Id of the input, used to associate the label. Generated when omitted. */
+    id?: string;
+    /** Name of the value, for native form submission. */
+    name?: string;
+    /** Ref to the `<input>`. */
+    inputRef?: RefObject<HTMLInputElement>;
+    /** Class name of the outer container. */
+    className?: string;
+    /** Class name of the `<input>`. */
+    inputClassName?: string;
+}
+interface ComboboxSingleProps extends ComboboxBaseProps {
+    /**
+     * Without `multiple`: one value, shown as text in the input.
+     * @default false
+     */
+    multiple?: false;
+    /**
+     * Without `multiple`: the value of the selected option, matched against each option's `value`, or `''`
+     * for none. The Combobox is controlled: hold the value yourself and update it from `onChange`.
+     */
+    value: ComboboxValue;
+    /**
+     * Without `multiple`: called with the picked option's `value`, or `''` when the value is cleared with the
+     * clear button or by deleting all text in the input. Not called when picking the option that is already
+     * selected.
+     */
+    onChange: (value: ComboboxValue) => void;
+}
+interface ComboboxMultipleProps extends ComboboxBaseProps {
+    /**
+     * With `multiple`: several values, shown as pills in the field. It changes the types of `value` and
+     * `onChange` to arrays, so pass `value` as an array whenever it is set. It can't just be switched on for
+     * a single value. Picking an option toggles it and keeps the list open, and Backspace in the empty input
+     * removes the last value.
+     */
+    multiple: true;
+    /** With `multiple`: the values of the selected options, in the order they were picked, or `[]` for none. */
+    value: Array<ComboboxValue>;
+    /** With `multiple`: called with all selected values after one is added or removed, or `[]` when the clear button is used. */
+    onChange: (value: Array<ComboboxValue>) => void;
+    /** Only with `multiple`: pills shown in the field. The rest are behind a "+ N" button that lists them, as in BadgeList. @default 5 */
+    maxVisiblePills?: number;
+    /** Only with `multiple`: accessible name and tooltip of a pill's remove button. @default 'Remove' */
+    removePillAriaLabel?: string;
+}
+type ComboboxProps = ComboboxSingleProps | ComboboxMultipleProps;
+
+declare const Combobox: {
+    (props: ComboboxProps): JSX.Element;
+    displayName: string;
+};
+
 interface CardProps extends PaddingInterface, MarginInterface, FlexStylingInterface {
     id?: string;
     onClickCallback?: () => void;
@@ -715,50 +963,89 @@ declare const RadioButton: {
 };
 
 interface DropDownProps {
-    id?: string;
+    /**
+     * Content of the DropDown, usually DropDownItems. A DropDownItem with an `onClickCallback` closes the
+     * DropDown when clicked, unless it sets `closeDropDownOnClick={false}`. Other children with an
+     * `onClickCallback`, such as a Button, close it only when they set `closeDropDownOnClick`.
+     */
     children: ReactNode[] | ReactNode;
+    /**
+     * Element that toggles the DropDown, e.g. a Button or IconButton. It is cloned with a click handler
+     * under the prop named by `buttonCallbackName`.
+     */
     buttonComponent?: ReactNode;
+    /**
+     * Element the DropDown is anchored to, without any click handling. Use it with `isOpen` when the
+     * opening is controlled from elsewhere, e.g. a hover card or a tour step.
+     */
     triggerComponent?: ReactNode;
-    /** @default 'onClickCallback' */
+    /**
+     * Name of the click prop the DropDown attaches to `buttonComponent`. Use `'onClick'` for plain
+     * elements, or e.g. `'onRightClickCallback'` to toggle from one part of a MultiActionButton.
+     * @default 'onClickCallback'
+     */
     buttonCallbackName?: string;
-    footerComponent?: ReactNode;
+    /** Dark header rendered above the children. */
     title?: string;
-    className?: string;
-    dropDownClassName?: string;
-    childrenClassName?: string;
-    /** @default true */
-    withArrow?: boolean;
-    /** @default false */
+    /** Content rendered below the children, e.g. an action or a summary. */
+    footerComponent?: ReactNode;
+    /**
+     * Controls whether the DropDown is open. When set, the DropDown doesn't toggle itself: update it
+     * from `onOpenCallback` and `onCloseCallback`.
+     */
+    isOpen?: boolean;
+    /** Called when the button is clicked while the DropDown is closed. */
+    onOpenCallback?: () => void;
+    /** Called when the DropDown closes from the button, an outside click, Escape or a child click. */
+    onCloseCallback?: () => void;
+    /** Close the DropDown when Escape is pressed. @default true */
+    closeOnEscape?: boolean;
+    /** Shows a spinner over the children, e.g. while they are being fetched. @default false */
     loading?: boolean;
-    /** @default true */
+    /** Wrap the children in a `<ul>`. Set to false for content that is not a list of DropDownItems. @default true */
     childrenIsList?: boolean;
-    /** @default true */
-    closeOnEscape?: boolean;
-    isOpen?: boolean;
-    /** @default false */
+    /** Let content overflow the list, e.g. for nested menus or tooltips. @default false */
     withVisibleOverflow?: boolean;
-    rotateIconByDegree?: number;
-    rotateLeftIconByDegree?: number;
-    rotateMiddleIconByDegree?: number;
-    rotateRightIconByDegree?: number;
-    /** @default false */
-    withPortal?: boolean;
+    /** Render the arrow pointing at the button. @default true */
+    withArrow?: boolean;
     /** @default true */
     withShadow?: boolean;
-    /** @default 'auto' */
+    /**
+     * Render the DropDown in the `#root` element, or `document.body` when there is none, instead of next
+     * to the button, so it escapes parents with `overflow: hidden` or their own stacking context.
+     * @default false
+     */
+    withPortal?: boolean;
+    /** Preferred side of the button to open on. Flips when there is not enough room. @default 'auto' */
     placement?: Placement;
-    /** @default 'absolute' */
+    /** Use `'fixed'` when the button is inside a fixed element, such as a sticky header. @default 'absolute' */
     strategy?: PositioningStrategy;
-    /** @default { horizontal: 8, vertical: 12 } */
+    /** Distance in pixels between the button and the DropDown. @default { horizontal: 8, vertical: 12 } */
     offset?: {
         horizontal: number;
         vertical: number;
     };
+    /** Minimum distance in pixels between the arrow and the DropDown's corners. @default 16 */
     arrowPadding?: number;
-    onCloseCallback?: () => void;
-    onOpenCallback?: () => void;
+    /** Passed on to the button's `rotateIconByDegree` while the DropDown is open, e.g. `180` to flip a chevron. */
+    rotateIconByDegree?: number;
+    /** Passed on to the button's `rotateLeftIconByDegree` while open. For MultiActionButton. */
+    rotateLeftIconByDegree?: number;
+    /** Passed on to the button's `rotateMiddleIconByDegree` while open. For MultiActionButton. */
+    rotateMiddleIconByDegree?: number;
+    /** Passed on to the button's `rotateRightIconByDegree` while open. For MultiActionButton. */
+    rotateRightIconByDegree?: number;
+    /** Id of the outer container. */
+    id?: string;
+    /** Class name of the outer container, which holds the button. */
+    className?: string;
+    /** Class name of the positioned DropDown, e.g. to set its width. */
+    dropDownClassName?: string;
+    /** Class name of the `<ul>` around the children, when `childrenIsList` is true. */
+    childrenClassName?: string;
 }
 interface DropDownRef {
+    /** Recalculate the DropDown's position, e.g. after its content changed size. */
     forceUpdate: () => void;
 }
 
@@ -812,7 +1099,17 @@ interface DropDownItemProps {
     onClickCallback?: (e: MouseEvent<HTMLButtonElement>) => void;
     /** @default SizeTypes.MEDIUM */
     size?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
+    /**
+     * Marks the item as selected, with purple text and a check mark. Pass it to every item of a selection,
+     * `false` for the unselected ones, so the labels line up.
+     */
     active?: boolean;
+    /**
+     * Where the check mark of an `active` item goes. On the right it matches the option lists of SelectInput
+     * and Combobox, and the left is free for `leftIcon`.
+     * @default 'left'
+     */
+    activeIconPosition?: 'left' | 'right';
     /** @default false */
     withEllipsis?: boolean;
     /** @default false */
@@ -844,7 +1141,7 @@ interface DropDownItemProps {
 }
 
 declare const DropDownItem: {
-    ({ id, text, description, onClickCallback, size, textAlign, fontSize, fontWeight, descriptionClassName, descriptionContainerClassName, textColor, active, disabled, className, iconColor, leftIcon, rightIcon, rightComponent, children, iconSize, withEllipsis, iconClassName, wrapperElement, closeDropDownOnClick }: DropDownItemProps): JSX.Element;
+    ({ id, text, description, onClickCallback, size, textAlign, fontSize, fontWeight, descriptionClassName, descriptionContainerClassName, textColor, active, activeIconPosition, disabled, className, iconColor, leftIcon, rightIcon, rightComponent, children, iconSize, withEllipsis, iconClassName, wrapperElement, closeDropDownOnClick }: DropDownItemProps): JSX.Element;
     defaultProps: {
         closeDropDownOnClick: boolean;
     };
@@ -1022,6 +1319,8 @@ interface IconButtonProps extends IconStyleInterface {
     /** @default HierarchyTypes.SECONDARY */
     type?: HierarchyTypes.PRIMARY | HierarchyTypes.SECONDARY | HierarchyTypes.TERTIARY;
     onClickCallback?: (e: MouseEvent<HTMLButtonElement>) => void;
+    /** Called when the button is pressed, before it takes focus. Call `e.preventDefault()` to keep focus where it is, e.g. in an input the button belongs to. */
+    onMouseDownCallback?: (e: MouseEvent<HTMLButtonElement>) => void;
     style?: CSSProperties;
     iconSize?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
     /** @default SizeTypes.MEDIUM */
@@ -1043,7 +1342,7 @@ interface IconButtonProps extends IconStyleInterface {
     badgeColor?: BadgeTypes;
 }
 
-declare const IconButton: react.MemoExoticComponent<({ className, disabled, style, icon, id, text, size, type, href, iconColor, iconSize, iconClassName, onClickCallback, rotateIcon, tabIndex, autoFocus, buttonRef, rotateIconByDegree, toolTip, toolTipComponent, ariaLabel, toggleIcon, badge, badgeColor }: IconButtonProps) => JSX.Element>;
+declare const IconButton: react.MemoExoticComponent<({ className, disabled, style, icon, id, text, size, type, href, iconColor, iconSize, iconClassName, onClickCallback, onMouseDownCallback, rotateIcon, tabIndex, autoFocus, buttonRef, rotateIconByDegree, toolTip, toolTipComponent, ariaLabel, toggleIcon, badge, badgeColor }: IconButtonProps) => JSX.Element>;
 
 interface IconInterface$1 {
     loading?: boolean;
@@ -1791,45 +2090,6 @@ declare const TabGroup: {
     displayName: string;
 };
 
-interface OptionItem {
-    text: string;
-    value: string | number;
-    disabled?: boolean;
-}
-interface SelectInputProps {
-    inputRef?: RefObject<HTMLSelectElement>;
-    id?: string;
-    className?: string;
-    inputClassName?: string;
-    defaultOption?: string;
-    /** @default SizeTypes.MEDIUM */
-    size?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
-    sizeMd?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
-    sizeLg?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
-    sizeXl?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
-    /** @default false */
-    disabled?: boolean;
-    /** @default true */
-    withLabel?: boolean;
-    error?: string;
-    helperText?: string;
-    text?: string;
-    /** @default false */
-    marginBottom?: boolean;
-    /** @default false */
-    autoFocus?: boolean;
-    /** @default false */
-    loading?: boolean;
-    ariaLabel?: string;
-    label?: string;
-    name?: string;
-    onChange: (value: string | number) => void;
-    options: Array<OptionItem>;
-    value: string | number;
-    /** @default true */
-    nativeHtmlComponent?: boolean;
-}
-
 declare const SelectInput: {
     ({ label, withLabel, inputRef, nativeHtmlComponent, size, sizeMd, sizeLg, sizeXl, ariaLabel, id, onChange, defaultOption, value, error, autoFocus, helperText, options, disabled, loading, name, className, inputClassName, marginBottom }: SelectInputProps): JSX.Element;
     displayName: string;
@@ -1921,25 +2181,9 @@ declare const SkeletonItem: {
     displayName: string;
 };
 
-interface NoDataMessageProps {
-    id?: string;
-    className?: string;
-    icon?: Partial<IconTypes>;
-    title?: string;
-    message?: string;
-    /** @default false */
-    absoluteCenter?: boolean;
-    customLink?: ReactNode;
-    button?: {
-        onClickCallback: () => void;
-        text: string;
-        icon: Partial<IconTypes>;
-    };
-}
-
 declare const NoDataMessage: {
     ({ id, icon, title, message, className, absoluteCenter, customLink, button }: NoDataMessageProps): JSX.Element;
     displayName: string;
 };
 
-export { AnimatedCount, AnimatedCountProps, AppColors, AspectRatioTypes, Badge, BadgeItem, BadgeList, BadgeListProps, BadgeProps, BadgeTypes, BorderInterface, Box, Button, Card, Checkbox, ColorStyleInterface, ColorTypes, DropDown, DropDownItem, DropDownRef, FacetButton, FlexStylingInterface, FontFamilyTypes, FormSkeleton, Grid, Heading, HierarchyInterface, HierarchyTypes, Icon, IconButton, IconStyleInterface, IconTypes, Image, InlineButton, Input, Label, Link, LinkTypes, ListButton, ListButtonProps, ListItem, ListSkeleton, MarginInterface, MultiActionButton, NoDataMessage, NumberBadge, NumberBadgeProps, PaddingInterface, Pagination, Paragraph, RadioButton, SelectInput, Separator, SizeStyleInterface, SizeTypes, SkeletonItem, SolidSpinner, SortableTable, SortableTableCellInterface, SortableTableProps, Span, SwitchButton, Tab, TabGroup, TabGroupProps, TabIndicatorProps, TabProps, TabValue, TableTypes, TextAreaInput, ToolTip, borderClassNames, flexClassNames, marginClassNames, paddingClassNames };
+export { AnimatedCount, AnimatedCountProps, AppColors, AspectRatioTypes, Badge, BadgeItem, BadgeList, BadgeListProps, BadgeProps, BadgeTypes, BorderInterface, Box, Button, Card, Checkbox, ColorStyleInterface, ColorTypes, Combobox, ComboboxInputChangeReason, ComboboxMultipleProps, ComboboxProps, ComboboxSingleProps, ComboboxValue, DropDown, DropDownItem, DropDownProps, DropDownRef, FacetButton, FlexStylingInterface, FontFamilyTypes, FormSkeleton, Grid, Heading, HierarchyInterface, HierarchyTypes, Icon, IconButton, IconStyleInterface, IconTypes, Image, InlineButton, Input, Label, Link, LinkTypes, ListButton, ListButtonProps, ListItem, ListSkeleton, MarginInterface, MultiActionButton, NoDataMessage, NumberBadge, NumberBadgeProps, PaddingInterface, Pagination, Paragraph, RadioButton, SelectInput, OptionItem as SelectInputOptionItem, SelectInputProps, Separator, SizeStyleInterface, SizeTypes, SkeletonItem, SolidSpinner, SortableTable, SortableTableCellInterface, SortableTableProps, Span, SwitchButton, Tab, TabGroup, TabGroupProps, TabIndicatorProps, TabProps, TabValue, TableTypes, TextAreaInput, ToolTip, borderClassNames, flexClassNames, marginClassNames, paddingClassNames };