@commercelayer/app-elements 0.0.1

package/dist/ui/atoms/Skeleton.d.ts

@@ -0,0 +1,41 @@
+import { ReactNode } from 'react';
+interface SkeletonProps {
+    /**
+     * This prevents Skeleton to appear immediately.
+     * It can be used when loading times are too short and you don't want flashing of content
+     */
+    delayMs?: number;
+    /**
+     * Manly <SkeletonItem /> components should be used as children.
+     * But you might want to also pass a grid or something else that has <SkeletonItem /> as children
+     */
+    children: ReactNode;
+}
+declare function Skeleton({ children, delayMs, ...rest }: SkeletonProps): JSX.Element;
+declare namespace Skeleton {
+    var displayName: string;
+}
+interface SkeletonItemProps {
+    /**
+     * CSS classes
+     */
+    className?: string;
+    /**
+     * Can be `box` (default) to render a rectangular shape or `circle`
+     */
+    type?: 'box' | 'circle';
+    /**
+     * CSS dimension for width. It can be number if expressed in pixels or string.
+     * Example: `16`, `1rem` or '100%'.
+     * If no className is provided, the default value is `100%`.
+     */
+    width?: string | number;
+    /**
+     * CSS dimension for height. It can be number if expressed in pixels or string.
+     * Example: `16`, `1rem` or '100%'.
+     * If no className is provided, the default value is `1em`.
+     */
+    height?: string | number;
+}
+export declare function SkeletonItem({ className, type, width, height, ...rest }: SkeletonItemProps): JSX.Element;
+export { Skeleton };

package/dist/ui/atoms/Spacer.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { ReactNode } from 'react';
+export interface SpacingProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Value to be applied as `margin-top`
+     */
+    top?: SpacingValues;
+    /**
+     * Value to be applied as `margin-bottom`.
+     */
+    bottom?: SpacingValues;
+    children?: ReactNode;
+}
+/**
+ * Possible values are:
+ * 2: 0.5rem, 8px
+ * 4: 1rem, 16px
+ * 6: 1.5rem, 24px
+ * 8: 2rem, 32px
+ * 12: 3rem, 48px
+ * 14: 3.5rem, 56px
+ */
+export declare type SpacingValues = '2' | '4' | '6' | '8' | '12' | '14';
+declare function Spacer({ top, bottom, children, ...rest }: SpacingProps): JSX.Element;
+declare namespace Spacer {
+    var displayName: string;
+}
+export { Spacer };

package/dist/ui/atoms/StatusDot.d.ts

@@ -0,0 +1,9 @@
+export declare type DotVariant = 'success' | 'danger' | 'warning';
+export interface StatusDotProps {
+    variant: DotVariant;
+}
+declare function StatusDot({ variant, ...rest }: StatusDotProps): JSX.Element;
+declare namespace StatusDot {
+    var displayName: string;
+}
+export { StatusDot };

package/dist/ui/atoms/StatusIcon.d.ts

@@ -0,0 +1,16 @@
+export declare type StatusUI = 'success' | 'danger' | 'pending' | 'progress';
+export interface StatusIconProps {
+    /**
+     * A different icon will be displayed depending on the status. When status is `progress` we can also pass a `percentage` prop
+     */
+    status: StatusUI;
+    /**
+     * Only used when `status` is progress. Accepts number from 0 to 100
+     */
+    percentage?: number;
+}
+declare function StatusIcon({ status, percentage, ...rest }: StatusIconProps): JSX.Element;
+declare namespace StatusIcon {
+    var displayName: string;
+}
+export { StatusIcon };

package/dist/ui/atoms/Tabs.d.ts

@@ -0,0 +1,46 @@
+import React, { ReactNode } from 'react';
+interface Props {
+    /**
+     * Used for accessability
+     */
+    id?: string;
+    className?: string;
+    /**
+     * Event the fires every time a tab is activated. Note that this also fires on first render.
+     */
+    onTabSwitch?: (tabIndex: number) => void;
+    /**
+     * Children can only be <Tab> components
+     * Example:
+     * ```
+     * <Tabs>
+     *   <Tab name="First tab">My content<Tab>
+     *   <Tab name="Second tab">Another content<Tab>
+     * </Tabs>
+     * ```
+     */
+    children: Array<React.ReactElement<TabProps, typeof Tab> | null>;
+    /**
+     * This controls whether the content of inactive panels should be un-mounted or kept mounted but hidden.
+     */
+    keepAlive?: boolean;
+}
+declare function Tabs({ id, children, onTabSwitch, className, keepAlive, ...rest }: Props): JSX.Element;
+declare namespace Tabs {
+    var displayName: string;
+}
+interface TabProps {
+    /**
+     * This is the tab name used to render the Tab Navigation on top
+     */
+    name: string;
+    /**
+     * Tab Panel content
+     */
+    children: ReactNode;
+}
+declare function Tab({ children }: TabProps): React.ReactElement;
+declare namespace Tab {
+    var displayName: string;
+}
+export { Tab, Tabs };

package/dist/ui/atoms/Text.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ReactNode } from 'react';
+export declare type TextVariant = 'danger' | 'success' | 'primary' | 'orange' | 'info' | 'plain';
+export declare type TextSize = 'small' | 'regular' | 'large' | 'inherit';
+export declare type TextWeight = 'regular' | 'medium' | 'semibold' | 'bold' | 'inherit';
+export declare type TextAlignment = 'center' | 'left' | 'right' | 'inherit';
+export declare type TextWrap = 'normal' | 'nowrap' | 'inherit';
+export interface TextProps extends React.HTMLAttributes<HTMLElement> {
+    children?: ReactNode;
+    variant?: TextVariant;
+    size?: TextSize;
+    weight?: TextWeight;
+    align?: TextAlignment;
+    wrap?: TextWrap;
+    tag?: 'div' | 'span';
+}
+declare function Text({ children, className, variant, weight, size, align, wrap, tag, ...rest }: TextProps): JSX.Element;
+declare namespace Text {
+    var displayName: string;
+}
+export { Text };

package/dist/ui/atoms/dropdown/DropdownMenu.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface Props extends React.HTMLAttributes<HTMLElement> {
+    children?: React.ReactNode;
+    arrow?: 'none';
+}
+declare function DropdownMenu({ children, arrow, ...rest }: Props): JSX.Element;
+declare namespace DropdownMenu {
+    var displayName: string;
+}
+export { DropdownMenu };

package/dist/ui/atoms/dropdown/DropdownMenuDivider.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface Props extends React.HTMLAttributes<HTMLElement> {
+    children?: React.ReactNode;
+}
+declare function DropdownMenuDivider({ children, ...rest }: Props): JSX.Element;
+declare namespace DropdownMenuDivider {
+    var displayName: string;
+}
+export { DropdownMenuDivider };

package/dist/ui/atoms/dropdown/DropdownMenuItem.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface Props extends React.HTMLAttributes<HTMLElement> {
+    label: string;
+    icon?: React.ReactNode;
+}
+declare function DropdownMenuItem({ label, icon, ...rest }: Props): JSX.Element;
+declare namespace DropdownMenuItem {
+    var displayName: string;
+}
+export { DropdownMenuItem };

package/dist/ui/atoms/dropdown/index.d.ts

@@ -0,0 +1,3 @@
+export { DropdownMenu } from './DropdownMenu';
+export { DropdownMenuItem } from './DropdownMenuItem';
+export { DropdownMenuDivider } from './DropdownMenuDivider';

package/dist/ui/atoms/tables/Td.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface Props extends React.TdHTMLAttributes<HTMLElement> {
+    children?: React.ReactNode;
+}
+declare function Td({ children, ...rest }: Props): JSX.Element;
+declare namespace Td {
+    var displayName: string;
+}
+export { Td };

package/dist/ui/atoms/tables/Th.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface Props extends React.ThHTMLAttributes<HTMLElement> {
+    children?: React.ReactNode;
+}
+declare function Th({ children, ...rest }: Props): JSX.Element;
+declare namespace Th {
+    var displayName: string;
+}
+export { Th };

package/dist/ui/atoms/tables/Tr.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface Props extends React.HTMLAttributes<HTMLElement> {
+    children?: React.ReactNode;
+}
+declare function Tr({ children, ...rest }: Props): JSX.Element;
+declare namespace Tr {
+    var displayName: string;
+}
+export { Tr };

package/dist/ui/atoms/tables/index.d.ts

@@ -0,0 +1,3 @@
+export { Tr } from './Tr';
+export { Th } from './Th';
+export { Td } from './Td';

package/dist/ui/composite/ContextMenu.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface Props {
+    menuLabel?: React.ReactNode;
+    menuItems: React.ReactNode;
+}
+declare function ContextMenu({ menuLabel, menuItems, ...rest }: Props): JSX.Element;
+declare namespace ContextMenu {
+    var displayName: string;
+}
+export { ContextMenu };

package/dist/ui/composite/PageError.d.ts

@@ -0,0 +1,30 @@
+interface PageErrorProps {
+    /**
+     * Main page title wrapped in a h1 element
+     */
+    pageTitle?: string;
+    /**
+     * Optional callback that will be called when "go back" button is pressed
+     * If missing, the "go back" button will not be shown
+     */
+    onGoBack?: () => void;
+    /**
+     * The name of the error to be show above the detailed message text.
+     * Example: 'Not Found'
+     */
+    errorName: string;
+    /**
+     * Detailed message that explains the error better.
+     * Example: 'We could not find the page you are looking for.'
+     */
+    errorDescription: string;
+    /**
+     * Any element that can be used as CTA to help the user to navigate away from this error page
+     */
+    actionButton?: JSX.Element;
+}
+declare function PageError({ pageTitle, onGoBack, errorName, errorDescription, actionButton, ...rest }: PageErrorProps): JSX.Element;
+declare namespace PageError {
+    var displayName: string;
+}
+export { PageError };

package/dist/ui/composite/PageLayout.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { PageHeadingProps } from '../atoms/PageHeading';
+export interface PageLayoutProps extends Omit<PageHeadingProps, 'badgeVariant' | 'badgeLabel'> {
+    /**
+     * Page content
+     */
+    children: ReactNode;
+    /**
+     * When mode is `test`, it will render a `TEST DATA` Badge to inform user api is working in test mode.
+     */
+    mode?: 'test' | 'live';
+}
+declare function PageLayout({ title, description, onGoBack, children, actionButton, mode, ...rest }: PageLayoutProps): JSX.Element;
+declare namespace PageLayout {
+    var displayName: string;
+}
+export { PageLayout };

package/dist/ui/composite/PageSkeleton.d.ts

@@ -0,0 +1,10 @@
+interface PageSkeletonProps {
+    layout?: 'list' | 'details';
+    hasHeaderDescription?: boolean;
+    delayMs?: number;
+}
+declare function PageSkeleton({ layout, hasHeaderDescription, delayMs }: PageSkeletonProps): JSX.Element;
+declare namespace PageSkeleton {
+    var displayName: string;
+}
+export { PageSkeleton };

package/dist/ui/composite/Report.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+interface ReportItem {
+    label: string;
+    count: ReactNode;
+    linkUrl?: string;
+    linkLabel?: string;
+    downloadJsonAsFile?: object;
+    downloadJsonFilename?: string;
+}
+export interface ReportProps {
+    items: ReportItem[];
+    isLoading?: boolean;
+    loadingLines?: number;
+}
+declare function Report({ items, isLoading, loadingLines, ...rest }: ReportProps): JSX.Element;
+declare namespace Report {
+    var displayName: string;
+}
+export { Report };

package/dist/ui/forms/Input.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { InputWrapperBaseProps } from '../forms/InputWrapper';
+export interface InputProps extends InputWrapperBaseProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    /**
+     * controlled type
+     */
+    type?: 'text' | 'number' | 'password' | 'tel' | 'url' | 'email';
+    /**
+     * optional css class names used for the input element
+     */
+    className?: string;
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export { Input };

package/dist/ui/forms/InputDate/InputDateComponent.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+import DatePicker from 'react-datepicker';
+import { InputWrapperBaseProps } from '../../forms/InputWrapper';
+export declare type MaybeDate = Date | null;
+export interface InputDateProps extends InputWrapperBaseProps {
+    /**
+     * controlled value
+     */
+    value?: MaybeDate;
+    /**
+     * callback fired when value is changed
+     */
+    onChange: (date: MaybeDate) => void;
+    /**
+     * optional css class names used for the outer wrapper/container element
+     */
+    wrapperClassName?: string;
+    /**
+     * optional css class names used for the input element
+     */
+    inputClassName?: string;
+    /**
+     * optional placeholder text
+     */
+    placeholder?: string;
+    /**
+     * string to be parsed as formatter (eg. MM/dd/yyyy, dd-MM-yy, ect...).
+     * When undefined, will autodetect format from user's browser
+     */
+    format?: string;
+    /**
+     * disable selection of previous dates
+     */
+    minDate?: Date;
+    /**
+     * set placeholder as detected date format
+     */
+    autoPlaceholder?: boolean;
+    /**
+     * enables a button to clear the selected date
+     */
+    isClearable?: boolean;
+}
+declare const InputDateComponent: React.ForwardRefExoticComponent<InputDateProps & React.RefAttributes<DatePicker<never, undefined>>>;
+export { InputDateComponent };

package/dist/ui/forms/InputDate/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { InputDateProps } from './InputDateComponent';
+import DatePicker from 'react-datepicker';
+declare const InputDate: React.ForwardRefExoticComponent<InputDateProps & React.RefAttributes<DatePicker<never, undefined>>>;
+export { InputDate };

package/dist/ui/forms/InputDateRange.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { InputDateProps, MaybeDate } from './InputDate/InputDateComponent';
+import { InputWrapperBaseProps } from '../forms/InputWrapper';
+export interface InputDateRangeProps extends Pick<InputDateProps, 'isClearable' | 'format' | 'autoPlaceholder'>, InputWrapperBaseProps {
+    /**
+     * a tuple that represents the [from, to] dates
+     */
+    value: [MaybeDate, MaybeDate];
+    /**
+     * callback triggered when one of the two dates changes
+     */
+    onChange: (dates: [MaybeDate, MaybeDate]) => void;
+    /**
+     * optional placeholder text for the `from` date
+     */
+    fromPlaceholder?: string;
+    /**
+     * optional placeholder text for the `to` date
+     */
+    toPlaceholder?: string;
+}
+declare const InputDateRange: React.ForwardRefExoticComponent<InputDateRangeProps & React.RefAttributes<HTMLDivElement>>;
+export { InputDateRange };

package/dist/ui/forms/InputFeedback.d.ts

@@ -0,0 +1,11 @@
+export declare type FeedbackVariant = 'danger' | 'success' | 'warning';
+export interface InputFeedbackProps {
+    message: string;
+    variant?: FeedbackVariant;
+    className?: string;
+}
+declare function InputFeedback({ className, message, variant, ...rest }: InputFeedbackProps): JSX.Element;
+declare namespace InputFeedback {
+    var displayName: string;
+}
+export { InputFeedback };

package/dist/ui/forms/InputFile.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { InputWrapperBaseProps } from '../forms/InputWrapper';
+interface InputFileProps extends InputWrapperBaseProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    /**
+     * If defined, it shows a progress bar at the bottom. It must be between 0 and 100.
+     */
+    progress?: number;
+}
+declare const InputFile: React.ForwardRefExoticComponent<InputFileProps & React.RefAttributes<HTMLInputElement>>;
+export { InputFile };

package/dist/ui/forms/InputJson.d.ts

@@ -0,0 +1,14 @@
+import { InputWrapperBaseProps } from './InputWrapper';
+export interface InputJsonProps<JsonType> extends InputWrapperBaseProps {
+    placeholder: object;
+    validateFn: (json: any) => JsonType;
+    onDataReady: (validJson: JsonType) => void;
+    onDataResetRequest: () => void;
+    errorMessageText?: string;
+    className?: string;
+}
+declare function InputJson<JsonType extends object>({ placeholder, validateFn, onDataReady, onDataResetRequest, errorMessageText, className, label, feedback, hint, ...rest }: InputJsonProps<JsonType>): JSX.Element;
+declare namespace InputJson {
+    var displayName: string;
+}
+export { InputJson };

package/dist/ui/forms/InputReadonly.d.ts

@@ -0,0 +1,24 @@
+import { InputWrapperBaseProps } from './InputWrapper';
+interface InputReadonlyProps extends InputWrapperBaseProps {
+    /**
+     * controlled value
+     */
+    value?: string;
+    /**
+     * optional css class names used for the outer wrapper/container element
+     */
+    wrapperClassName?: string;
+    /**
+     * optional css class names used for the input element
+     */
+    inputClassName?: string;
+    /**
+     * optional prop to define whether to show or not the Copy to clipboard button
+     */
+    showCopyAction?: boolean;
+}
+declare function InputReadonly({ value, wrapperClassName, inputClassName, showCopyAction, label, hint, feedback, ...rest }: InputReadonlyProps): JSX.Element;
+declare namespace InputReadonly {
+    var displayName: string;
+}
+export { InputReadonly };

package/dist/ui/forms/InputSelect/Async.d.ts

@@ -0,0 +1,11 @@
+import { InputSelectProps, SelectValue } from './';
+import { StylesConfig } from 'react-select';
+import { SetRequired } from 'type-fest';
+interface AsyncSelectComponentProps extends Omit<SetRequired<InputSelectProps, 'loadAsyncValues'>, 'label' | 'hint'> {
+    styles: StylesConfig<SelectValue>;
+}
+declare function AsyncSelectComponent({ onSelect, noOptionsMessage, initialValues, loadAsyncValues, ...rest }: AsyncSelectComponentProps): JSX.Element;
+declare namespace AsyncSelectComponent {
+    var displayName: string;
+}
+export { AsyncSelectComponent };

package/dist/ui/forms/InputSelect/Select.d.ts

@@ -0,0 +1,10 @@
+import { InputSelectProps, SelectValue } from './';
+import { StylesConfig } from 'react-select';
+interface SelectComponentProps extends Omit<InputSelectProps, 'loadAsyncValues' | 'label' | 'hint'> {
+    styles: StylesConfig<SelectValue>;
+}
+declare function SelectComponent({ onSelect, noOptionsMessage, initialValues, ...rest }: SelectComponentProps): JSX.Element;
+declare namespace SelectComponent {
+    var displayName: string;
+}
+export { SelectComponent };

package/dist/ui/forms/InputSelect/index.d.ts

@@ -0,0 +1,59 @@
+import { FocusEventHandler } from 'react';
+import { MultiValue, SingleValue } from 'react-select';
+import { InputWrapperBaseProps } from '../../forms/InputWrapper';
+export declare type GroupedSelectValues = Array<{
+    label: string;
+    options: SelectValue[];
+}>;
+export interface SelectValue {
+    value: string | number;
+    label: string;
+    meta?: Record<string, any>;
+}
+export declare type PossibleSelectValue = MultiValue<SelectValue> | SingleValue<SelectValue>;
+export interface InputSelectProps extends InputWrapperBaseProps {
+    initialValues: GroupedSelectValues | SelectValue[];
+    defaultValue?: SelectValue | SelectValue[];
+    placeholder?: string;
+    isLoading?: boolean;
+    loadingText?: string;
+    isClearable?: boolean;
+    isDisabled?: boolean;
+    isSearchable?: boolean;
+    isMulti?: boolean;
+    onSelect: (value: PossibleSelectValue) => void;
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+    name?: string;
+    menuIsOpen?: boolean;
+    noOptionsMessage?: string;
+    className?: string;
+    loadAsyncValues?: (inputValue: string) => Promise<GroupedSelectValues | SelectValue[]>;
+}
+declare function InputSelect({ label, hint, feedback, menuIsOpen, initialValues, defaultValue, isClearable, isLoading, loadingText, placeholder, isDisabled, isSearchable, onSelect, isMulti, onBlur, name, className, loadAsyncValues, noOptionsMessage, ...rest }: InputSelectProps): JSX.Element;
+declare namespace InputSelect {
+    var displayName: string;
+}
+/**
+ * Helper function to understand and refine type of a single selected value
+ * @param selectedValue possible value returned from select component
+ * @returns true if selected value is single, from this point TypeScript will treat this as `SelectValue` type
+ */
+export declare function isSingleValueSelected(selectedValue: PossibleSelectValue): selectedValue is SelectValue;
+/**
+ * Helper function to extract only the `value` from the  `SelectValue`
+ * @param selectedValue possible value returned from select component
+ * @returns a string or an array of strings.
+ * Examples:
+ * ```
+ * {value: 'ABCD', label: 'T-Shirt XL'}
+ * // returns 'ABCD'
+ *
+ * [
+ *   {value: 'ABCD', label: 'T-Shirt M'},
+ *   {value: '1234', label: 'T-Shirt XL'},
+ * ]
+ * // returns ['ABCD', '1234']
+ * ```
+ */
+export declare function flatSelectValues(selectedValue: PossibleSelectValue): null | string | Array<string | number>;
+export { InputSelect };

package/dist/ui/forms/InputSelect/overrides.d.ts

@@ -0,0 +1,10 @@
+import { DropdownIndicatorProps, ClearIndicatorProps } from 'react-select';
+import { SelectValue } from '.';
+declare function DropdownIndicator(props: DropdownIndicatorProps<SelectValue>): JSX.Element;
+declare function ClearIndicator(props: ClearIndicatorProps<SelectValue>): JSX.Element;
+declare const selectComponentOverrides: {
+    DropdownIndicator: typeof DropdownIndicator;
+    IndicatorSeparator: () => null;
+    ClearIndicator: typeof ClearIndicator;
+};
+export default selectComponentOverrides;

package/dist/ui/forms/InputSelect/styles.d.ts

@@ -0,0 +1,4 @@
+import { StylesConfig } from 'react-select';
+import { SelectValue } from '.';
+import { InputFeedbackProps } from '../../forms/InputFeedback';
+export declare const getSelectStyles: (feedbackVariant?: InputFeedbackProps['variant']) => StylesConfig<SelectValue>;

package/dist/ui/forms/InputTextArea.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { InputWrapperBaseProps } from '../forms/InputWrapper';
+interface InputTextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement>, InputWrapperBaseProps {
+}
+declare const InputTextArea: React.ForwardRefExoticComponent<InputTextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export { InputTextArea };

package/dist/ui/forms/InputToggleBox.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface InputToggleBoxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'value'> {
+    id: string;
+    label: string;
+    description?: React.ReactNode;
+    className?: string;
+}
+declare const InputToggleBox: React.ForwardRefExoticComponent<InputToggleBoxProps & React.RefAttributes<HTMLInputElement>>;
+export { InputToggleBox };

package/dist/ui/forms/InputToggleListBox.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export interface InputToggleListBoxOption {
+    value: string;
+    label: string;
+}
+export interface InputToggleListBoxProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'value' | 'onSelect'> {
+    id: string;
+    label: string;
+    description?: React.ReactNode;
+    value?: string;
+    options: InputToggleListBoxOption[];
+    className?: string;
+}
+declare const InputToggleListBox: React.ForwardRefExoticComponent<InputToggleListBoxProps & React.RefAttributes<HTMLSelectElement>>;
+export { InputToggleListBox };