@veeqo/ui 0.0.1 → 0.0.3

package/lib/index.d.ts

@@ -1,19 +1,462 @@
 /// <reference types="react" />
-import * as react from 'react';
-import react__default, { ReactNode } from 'react';
+import * as React$1 from 'react';
+import React__default, { FC, ReactNode, ButtonHTMLAttributes, SyntheticEvent, ReactEventHandler, Component, CSSProperties, PureComponent } from 'react';
 import * as styled_components from 'styled-components';
-import * as styled_components_dist_types from 'styled-components/dist/types';
+import { Placement } from '@popperjs/core';
 
-type LoaderType = 'Grid' | 'TailSpin' | 'ThreeDots';
-interface LoaderProps {
+interface AccordionProps {
+    children: ReactNode;
+    label: string;
+    iconSlot?: ReactNode;
     className?: string;
-    height?: number;
-    width?: number;
-    color?: string;
-    type?: LoaderType;
+    timeout?: number;
+    transitionClassnames?: string;
+    description?: string;
+    shouldOpenOnMount?: boolean;
+}
+declare const Accordion: FC<AccordionProps>;
+
+type ButtonVariant = 'default' | 'destructive' | 'primary' | 'primaryDestructive' | 'flat' | 'link' | 'unstyled';
+/**
+ * Button properties.
+ */
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    children?: ReactNode;
+    /** Variant styles */
+    variant?: ButtonVariant;
+    /** Button sizes */
+    size?: 'sm' | 'base';
+    /** Icon */
+    icon?: ReactNode;
+    /** Renders a dropdown indicator inside the button */
+    dropdown?: boolean;
+    /** Renders a loading indicator inside the button */
+    loading?: boolean;
+}
+
+type ActionListItem = {
+    title: string;
+    icon?: Omit<ReactNode, string>;
+    variant?: 'item' | 'action' | 'link';
+    onClick: () => void;
+};
+type ActionListSection = {
+    title?: string;
+    items: ActionListItem[];
+};
+interface ActionListProps {
+    title: string;
+    items?: ActionListItem[];
+    sections?: ActionListSection[];
+    buttonVariant?: ButtonVariant;
+    buttonSize?: 'sm' | 'base';
+}
+
+declare const ActionList: ({ title, items, sections, buttonVariant, buttonSize, }: ActionListProps) => React__default.JSX.Element;
+
+interface AnchorProps {
+    children?: ReactNode;
+    href: string;
+    text?: string;
+    className?: string;
+    target?: string;
+}
+declare const Anchor: ({ children, className, text, href, target }: AnchorProps) => React__default.JSX.Element;
+
+declare enum ComponentSize {
+    base = "base",
+    sm = "sm"
+}
+declare enum WeightUnit {
+    g = "g",
+    lb = "lb"
+}
+type EventHandlerProps = {
+    onClick?: (event: SyntheticEvent) => void;
+    onKeyUp?: (event: SyntheticEvent) => void;
+    onKeyDown?: (event: SyntheticEvent) => void;
+    onKeyPress?: (event: SyntheticEvent) => void;
+    onMouseEnter?: (event: SyntheticEvent) => void;
+    onMouseLeave?: (event: SyntheticEvent) => void;
+    onChange?: (event: SyntheticEvent) => void;
+    onBlur?: (event: SyntheticEvent) => void;
+    onFocus?: (event: SyntheticEvent) => void;
+};
+
+type BasicDropdownProps = EventHandlerProps & {
+    className?: string;
+    children: ReactNode;
+};
+type AnimatedDropdownProps = BasicDropdownProps & {
+    cta?: ReactNode;
+    shouldShowDropdown: boolean;
+    timeout?: number;
+    transitionClassnames?: string;
+    onClickAway?: (event: Event) => void;
+    reversed?: boolean;
+};
+
+declare const AnimatedDropdown: ({ cta, shouldShowDropdown, children, className, reversed, onClickAway, timeout, transitionClassnames, onClick, onMouseEnter, onMouseLeave, }: AnimatedDropdownProps) => React__default.JSX.Element;
+
+interface AvatarProps {
+    name: string;
+    width?: string;
+    bgColor?: string;
+    textColor?: string;
+}
+
+declare const Avatar: ({ width, name, bgColor, textColor, }: AvatarProps) => React__default.JSX.Element;
+
+type BadgeVariant = 'default' | 'primary' | 'warning';
+/**
+ * Badge properties.
+ */
+type BadgeProps = {
+    /**
+     * Specifies the Badge variant.
+     */
+    variant?: BadgeVariant;
+    /**
+     * Renders an optional icon inside the Badge.
+     */
+    iconSlot?: Omit<ReactNode, string>;
+    /**
+     * Specifies tooltip text to display on hover.
+     */
+    tooltip?: string;
+    /**
+     * Specifies whether or not to hide the Badge border.
+     */
+    hideBorder?: boolean;
+    /**
+     * Specifies an optional class name.
+     */
+    className?: string;
+    /**
+     * Specifies an optional class name for E2E testing.
+     */
+    e2eClassName?: string;
+    /**
+     * Children.
+     */
+    children: React__default.ReactNode;
+};
+
+declare const Badge: ({ variant, hideBorder, iconSlot, tooltip, className, e2eClassName, children, }: BadgeProps) => React__default.JSX.Element;
+
+declare enum BannerTypes {
+    help = "help",
+    info = "info",
+    error = "error",
+    success = "success"
+}
+type BannerProps = {
+    type?: keyof typeof BannerTypes | string;
+    text?: string;
+    icon?: Omit<ReactNode, string>;
+    onClose?: ReactEventHandler;
+    className?: string;
+    header?: ReactNode;
+};
+
+/**
+ * The `Banner` component was previously called `Alert` (and similarly `Pill`).
+ */
+declare const Banner: ({ type, text, icon, onClose, className, header, }: BannerProps) => React__default.JSX.Element;
+
+declare const BaseContainer: styled_components.StyledComponent<"div", any, {}, never>;
+
+type Item = {
+    pathname: string;
+    title: string;
+};
+type LinkComponentProps = false | React.ComponentType<any>;
+interface BreadcrumbsProps {
+    items: Item[];
+    Separator?: string | React.ReactNode;
+    LinkComponent?: LinkComponentProps;
+}
+
+declare const Breadcrumbs: ({ items, Separator, LinkComponent, }: BreadcrumbsProps) => React__default.JSX.Element;
+
+declare const Button: React__default.ForwardRefExoticComponent<ButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
+
+type CardElevation = 0 | 1 | 2 | 3 | 4;
+declare const accents: {
+    info: string;
+    success: string;
+    error: string;
+};
+interface SurfaceProps {
+    elevation?: CardElevation;
+    accent?: keyof typeof accents;
+}
+
+type CardAction = {
+    title: string;
+    onClick: () => void;
+};
+type CardProps = {
+    className?: string;
+    style?: React__default.CSSProperties;
+    title?: string;
+    subtitle?: string;
+    HeaderActionSlot?: React__default.ReactNode;
+    action?: CardAction;
+    collapsable?: boolean;
+    elevation?: CardElevation;
+    accent?: 'info' | 'success' | 'error';
+    children: ReactNode;
+    onClose?: () => void;
+    renderFooter?: () => ReactNode;
+};
+declare const Card: {
+    ({ className, style, title, subtitle, HeaderActionSlot, action, collapsable, elevation, accent, children, onClose, renderFooter, }: CardProps): React__default.JSX.Element;
+    Surface: styled_components.StyledComponent<"div", any, SurfaceProps, never>;
+    Section: styled_components.StyledComponent<"section", any, {}, never>;
+    FullBleed: styled_components.StyledComponent<"div", any, {}, never>;
+    Footer: styled_components.StyledComponent<"footer", any, {}, never>;
+};
+
+declare const headerVariants: readonly ["headingXXL", "headingXL", "headingLarge", "headingMedium", "headingSmall"];
+declare const textVariants: readonly ["headingXXL", "headingXL", "headingLarge", "headingMedium", "headingSmall", "headingTable", "subheadingLarge", "subheadingMedium", "subheadingSmall", "subheadingSmallBold", "body", "bodySmall", "bodyBold", "bodyBoldDark", "bodySmallBold", "inputLabel", "inputLabelSmall", "hintText", "placeholder", "placeholderSmall", "placeholderCode", "placeholderCodeSmall", "error", "errorSmall", "successSmall"];
+/** @deprecated do not use me */
+declare const deprecatedTextVariants: readonly ["button", "buttonSmall", "linkLarge", "linkMedium", "link", "linkSmall"];
+
+type HeaderVariant = (typeof headerVariants)[number];
+type TextVariant = (typeof textVariants)[number];
+type DeprecatedTextVariants = (typeof deprecatedTextVariants)[number];
+type ValidTextTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'label' | 'li' | 'ol' | 'ul' | 'blockquote' | 'code';
+type TextProps = {
+    as?: ValidTextTag;
+    muted?: boolean;
+} & ({
+    variant: TextVariant;
+} | {
+    /** @deprecated to be removed, bad for accessibility. Use `Button` or `Anchor` */
+    variant?: DeprecatedTextVariants;
+});
+
+type CardHeaderAction = {
+    title: string;
+    onClick: () => void;
+};
+interface CardHeaderProps {
+    id?: string;
+    title?: string;
+    subtitle?: string;
+    headerVariant?: HeaderVariant;
+    action?: CardHeaderAction;
+    ActionSlot?: React__default.ReactNode;
+    isCollapsed?: boolean;
+    onClickCollapse?: () => void;
+    onClickClose?: () => void;
+}
+declare const CardHeader: ({ id, title, subtitle, headerVariant, action, ActionSlot, isCollapsed, onClickCollapse, onClickClose, }: CardHeaderProps) => React__default.JSX.Element;
+
+interface ForwardedChoiceProps {
+    disabled?: boolean;
+    label?: string;
+    hint?: string;
+    tooltip?: string;
+    error?: string;
+    bordered?: boolean;
+    Badge?: ReactNode;
+    Accessory?: ReactNode;
+    Footer?: ReactNode;
+}
+interface ChoiceProps extends ForwardedChoiceProps {
+    id: string;
+    children: ReactNode;
+}
+declare const Choice: ({ id, label, hint, tooltip, error, bordered, Badge, Accessory, Footer, children, disabled, }: ChoiceProps) => React__default.JSX.Element;
+
+type CheckboxValue = string | number;
+interface CheckboxProps extends ForwardedChoiceProps {
+    checked: boolean;
+    indeterminate?: boolean;
+    value?: CheckboxValue;
+    name?: string;
+    disabled?: boolean;
+    ariaLabel?: string;
+    onChange: (checked: boolean, value?: CheckboxValue) => void;
+}
+declare const Checkbox: ({ checked, indeterminate, value, name, disabled, ariaLabel, onChange, ...otherProps }: CheckboxProps) => React__default.JSX.Element;
+
+type ChoiceListOptionValue = string | number;
+interface ChoiceListOption {
+    value: ChoiceListOptionValue;
+    name?: string;
+    label: string;
+    hint?: string;
+    disabled?: boolean;
+    Badge?: ReactNode;
+    Accessory?: ReactNode;
+    Footer?: ReactNode;
+}
+interface ChoiceListProps {
+    options: ChoiceListOption[];
+    selected: ChoiceListOptionValue[];
+    title?: string;
+    allowMultiple?: boolean;
+    disabled?: boolean;
+    bordered?: boolean;
+    error?: string;
+    onChange: (selected: ChoiceListOptionValue[]) => void;
+}
+declare class ChoiceList extends Component<ChoiceListProps> {
+    handleChange: (value: ChoiceListOptionValue, checked: boolean) => void;
+    handleChangeSingle: (value: ChoiceListOptionValue, checked: boolean) => void;
+    handleChangeMultiple: (value: ChoiceListOptionValue, checked: boolean) => void;
+    render(): React__default.JSX.Element;
+}
+
+interface CopyToClipboardProps {
+    className?: string;
+    text: string;
+    onCopy?: () => void;
+}
+/**
+ * A dynamic button to facilitate copying text to a users' keyboard when clicked.
+ */
+declare const CopyToClipboard: ({ className, text, onCopy }: CopyToClipboardProps) => React__default.JSX.Element;
+
+type DataTableId = string | number;
+type RowData = any;
+type DataTableHeader = {
+    id: DataTableId;
+    title?: string;
+    icon?: ReactNode;
+    tooltip?: string;
+    align?: 'left' | 'center' | 'right';
+    sortable?: boolean;
+    grow?: boolean;
+    width?: number | string;
+    skeleton?: string;
+    skeletonStyle?: CSSProperties;
+};
+type DataTableRow = {
+    id: DataTableId;
+    data: RowData;
+    nestedRows?: DataTableNestedRow[];
+    accentColor?: string;
+};
+type DataTableNestedRow = {
+    id: DataTableId;
+    data: RowData;
+};
+type DataTableSortDirection = 'ascending' | 'descending';
+type DataTableSelectionMode = 'multiple' | 'single';
+type SpecificStateType = {
+    icon: ReactNode;
+    title: string;
+    subTitle?: string;
+};
+type StripedType = boolean;
+type NoWrapType = boolean;
+type ShowScrollbarType = boolean;
+/**
+ * DataTable properties.
+ */
+interface DataTableProps$1 {
+    /** Removes the outer border */
+    borderless?: boolean;
+    /** Enables row zebra striping */
+    striped?: StripedType;
+    /** Disables text wrapping in header cells */
+    noWrap?: NoWrapType;
+    /** Forces OSX to render scrollbars */
+    showScrollbar?: ShowScrollbarType;
+    /** Configure column headers */
+    headers?: DataTableHeader[];
+    /** Configure content rows */
+    rows: DataTableRow[];
+    /** Render a content row */
+    renderRow: (row: DataTableRow) => ReactNode;
+    /** Render a nested content row */
+    renderNestedRow?: (nestedRow: DataTableNestedRow) => ReactNode;
+    /** List of row IDs that are expanded - their nested rows will be rendered */
+    expandedRowIds?: DataTableId[];
+    /** Render a content row when in the LOADING state */
+    renderLoadingRow?: () => ReactNode;
+    /** Render a footer row */
+    renderFooterRow?: (rows: DataTableRow[]) => ReactNode;
+    /** Render a footer row when in the LOADING state */
+    renderFooterLoadingRow?: () => ReactNode;
+    /** Hides the extra first cell added to the footer when row selection is enabled */
+    omitFooterSelectionCell?: boolean;
+    /** List of selected row IDs */
+    selectedRowIds?: Array<DataTableId>;
+    /** Sets the mode of row selection */
+    selectionMode?: DataTableSelectionMode;
+    /** Disable ability to select specified rows */
+    disabledSelectionInputRowIds?: DataTableId[];
+    /** Event triggered when rows are selected/deselected */
+    onChangeSelectedRowIds?: (selectedRowIds: Array<DataTableId>) => void;
+    /** Current sorted column ID (see headers config) */
+    sortColumnId?: DataTableId;
+    /** Current sort direction */
+    sortDirection?: DataTableSortDirection;
+    /** Event triggered when sortable column headers are clicked */
+    onChangeSort?: (columnId: DataTableId, direction: DataTableSortDirection) => void;
+    /** Shows the ERROR state */
+    isError: boolean;
+    /** Shows the LOADING state */
+    isLoading: boolean;
+    /** Default number of rows shown in LOADING state */
+    skeletonRowsNumber?: number;
+    /** Enables sticky headers row */
+    isHeaderSticky?: boolean;
+    /** Custom styles for stick header container - e.g. adding `top` offset */
+    stickyHeaderStyle?: CSSProperties;
+    /**
+     * Config object to show custom content when in ERROR or EMPTY states.
+     * Accepts `title`, `subTitle` and `icon`.
+     * */
+    customSpecificState?: SpecificStateType;
+    /** Override the table content height when using customSpecificState */
+    bodyHeightInSpecificStates?: number;
+    /** Number of fixed columns at the start of the table */
+    startFixedColumnsNumber?: number;
+    /** Number of fixed columns at the end of the table */
+    endFixedColumnsNumber?: number;
+}
+
+interface CellProps$1 {
+    align?: 'left' | 'center' | 'right';
+    grow?: boolean;
+}
+
+interface SkeletonCellProps extends CellProps$1 {
+    style?: CSSProperties;
+}
+
+interface EditableCellProps extends CellProps$1 {
+    onClick: React__default.MouseEventHandler<HTMLButtonElement>;
+    children: React__default.ReactNode;
+}
+
+interface ClickableCellProps extends CellProps$1 {
+    onClick: React__default.MouseEventHandler<HTMLButtonElement>;
+    children: React__default.ReactNode;
 }
 
-declare const Loader: ({ className, height, width, color, type, }: LoaderProps) => react__default.JSX.Element;
+declare const DataTable: {
+    ({ borderless, striped, noWrap, showScrollbar, headers, rows, renderRow, renderNestedRow, expandedRowIds, renderLoadingRow, renderFooterRow, renderFooterLoadingRow, omitFooterSelectionCell, selectedRowIds, disabledSelectionInputRowIds, selectionMode, onChangeSelectedRowIds, sortColumnId, sortDirection, onChangeSort, isError, isLoading, skeletonRowsNumber, isHeaderSticky, stickyHeaderStyle, customSpecificState, bodyHeightInSpecificStates, startFixedColumnsNumber, endFixedColumnsNumber, }: DataTableProps$1): React__default.JSX.Element;
+    Cell: styled_components.StyledComponent<"td", any, CellProps$1, never>;
+    ClickableCell: ({ onClick, children, ...otherProps }: ClickableCellProps) => React__default.JSX.Element;
+    EditableCell: ({ onClick, children, ...otherProps }: EditableCellProps) => React__default.JSX.Element;
+    SkeletonCell: {
+        ({ style, ...otherProps }: SkeletonCellProps): React__default.JSX.Element;
+        defaultProps: {
+            style: {};
+        };
+    };
+    SkeletonContent: ({ isLoading, style }: {
+        isLoading?: boolean | undefined;
+        style?: React__default.CSSProperties | undefined;
+    }) => React__default.JSX.Element;
+};
 
 declare enum Alignments {
     start = "flex-start",
@@ -46,23 +489,762 @@ type StackProps = {
     spacing?: Size;
 };
 
+type RowState = {
+    selected: boolean;
+    expanded: boolean;
+    disabled: boolean;
+};
+type ColumnId = string | number;
+type ColumnAlignment = 'left' | 'center' | 'right';
+type ColumnPinned = 'left' | 'right' | 'none';
+type ColumnSpacing = Size;
+type ColumnWidth = number | string;
+type ColumnWidthFixed = ColumnWidth;
+type ColumnWidthBounded = {
+    min?: ColumnWidth;
+    max?: ColumnWidth;
+};
+type ColumnConfig = {
+    id: ColumnId;
+    align?: ColumnAlignment;
+    hidden?: boolean;
+    icon?: Omit<ReactNode, string>;
+    pinned?: ColumnPinned;
+    sortable?: boolean;
+    spacing?: ColumnSpacing;
+    span?: number;
+    title?: string;
+    tooltip?: string;
+    width?: ColumnWidthFixed | ColumnWidthBounded;
+    renderCell: CellRenderer;
+    renderFooter?: FooterRenderer;
+    renderHeader?: HeaderRenderer;
+    renderNestedCell?: NestedCellRenderer;
+};
+type ColumnConfigs = Array<ColumnConfig>;
+declare enum SortDirection {
+    ascending = "ascending",
+    descending = "descending"
+}
+type SortState = {
+    columnId: ColumnId;
+    direction: SortDirection;
+};
+type SortChangeHandler = (sortState: SortState) => void;
+type RowId = number | string;
+interface NestedTableRow {
+    id: RowId;
+    data: any;
+}
+type NestedTableRows = Array<NestedTableRow>;
+interface TableRow {
+    id: RowId;
+    data: any;
+    nestedRows?: NestedTableRows;
+    accentColor?: string;
+    e2eClassName?: string;
+}
+type TableRows = Array<TableRow>;
+interface HeaderProps extends React.HtmlHTMLAttributes<HTMLTableCellElement> {
+    id: string;
+    align?: ColumnAlignment;
+    spacing?: ColumnSpacing;
+    span?: number;
+}
+interface RendererHeaderProps extends HeaderProps {
+    key: string;
+}
+interface SelectionHeaderProps extends Omit<HeaderProps, 'onChange'> {
+    selected: boolean;
+    indeterminate: boolean;
+    onChange: (selected: boolean, value: RowId | undefined) => void;
+    selectionMode: SelectionMode;
+}
+type HeaderRenderer = (column: ColumnConfig, headerProps: RendererHeaderProps) => ReactNode;
+type FooterRenderer = (column: ColumnConfig, footerProps: object) => ReactNode;
+type CellRenderer = (row: TableRow, cellProps: object, actions: TableActions, rowState: RowState) => ReactNode;
+type ParentRowState = RowState;
+type NestedCellRenderer = (nestedRow: NestedTableRow, cellProps: object, parentRowState: ParentRowState) => ReactNode;
+type SetSelectedAction = (selected: boolean, rowId: RowId | undefined) => void;
+type SetExpandedAction = (expanded: boolean, rowId: RowId | undefined) => void;
+type TableActions = {
+    setSelected: SetSelectedAction;
+    setExpanded: SetExpandedAction;
+};
+type BorderMode = 'full' | 'vertical' | 'none';
+type CustomState = {
+    icon: ReactNode;
+    heading: string;
+    subheading?: string;
+};
+type SelectionMode = 'single' | 'multiple';
+type SelectionState = [RowId[], (rowIds: RowId[]) => void];
+type StripingMode = 'row' | 'nested';
+interface DataTableProps {
+    ActionBarSlot?: ReactNode;
+    borderMode?: BorderMode;
+    columns: ColumnConfigs;
+    disabledRowIds?: Array<RowId>;
+    enableStickyHeader?: boolean;
+    emptyState?: CustomState;
+    expandedRowIds?: Array<RowId>;
+    loading?: boolean;
+    loadingRowCount?: number;
+    onChangeSort?: SortChangeHandler;
+    rows: TableRows;
+    selectionMode?: SelectionMode;
+    selectionState?: SelectionState;
+    setExpanded?: SetExpandedAction;
+    sortState?: SortState;
+    stripingMode?: StripingMode;
+}
+
+interface CellProps {
+    align?: ColumnAlignment;
+    spacing?: ColumnSpacing;
+    span?: number;
+}
+
+interface ColumnMenuProps {
+    columns: ColumnConfigs;
+    columnGroups: ColumnId[][];
+    setColumns: (columns: ColumnConfigs) => void;
+}
+declare function ColumnMenu({ columns, columnGroups, setColumns }: ColumnMenuProps): React__default.JSX.Element;
+
+interface SelectionCellProps extends CellProps {
+    rowId: RowId;
+    selected: boolean;
+    onChange: (selected: boolean, value: RowId | undefined) => void;
+    selectionMode: SelectionMode;
+    disabled: boolean;
+}
+declare function SelectionCell({ selected, rowId, onChange, selectionMode, disabled, ...cellProps }: SelectionCellProps): React__default.JSX.Element;
+
+declare function SelectionHeader({ selected, indeterminate, onChange, selectionMode, ...headerProps }: SelectionHeaderProps): React__default.JSX.Element;
+
+declare const DataTableExp: {
+    ({ ActionBarSlot, borderMode, columns, emptyState, expandedRowIds, loading, loadingRowCount, onChangeSort, rows, disabledRowIds, selectionMode, selectionState, setExpanded, sortState, stripingMode, enableStickyHeader, }: DataTableProps): React__default.JSX.Element;
+    defaultProps: {
+        loading: boolean;
+        loadingRowCount: number;
+        selectionMode: string;
+        stripingMode: string;
+        enableStickyHeader: boolean;
+    };
+    Cell: styled_components.StyledComponent<"td", any, CellProps, never>;
+    ColumnMenu: typeof ColumnMenu;
+    SelectionCell: typeof SelectionCell;
+    SelectionHeader: typeof SelectionHeader;
+    Header: styled_components.StyledComponent<"th", any, HeaderProps, never>;
+    Truncate: styled_components.StyledComponent<"div", any, {}, never>;
+    NoWrap: styled_components.StyledComponent<"div", any, {}, never>;
+};
+
+type DescriptionListItem = {
+    term: string;
+    description: string | string[];
+};
+interface DescriptionListProps {
+    items: DescriptionListItem[];
+    horizontal?: boolean;
+}
+declare const DescriptionList: ({ items, horizontal }: DescriptionListProps) => React__default.JSX.Element;
+
+interface PageHeaderProps$1 {
+    renderHeader: (toggleSidebar: () => void, shouldShowSidebar?: boolean) => ReactNode;
+    children: ReactNode;
+}
+declare const DetailPage: ({ renderHeader, children }: PageHeaderProps$1) => React__default.JSX.Element;
+
+interface DimensionsProps {
+    size?: ComponentSize;
+    handleChangeHeight: (value: string) => void;
+    handleChangeWidth: (value: string) => void;
+    handleChangeLength: (value: string) => void;
+    label?: string;
+    hint?: string;
+    error?: string;
+    height: string;
+    width: string;
+    length: string;
+    unit?: string;
+    className?: string;
+}
+
+declare const DimensionsInput: FC<DimensionsProps>;
+
+interface FilterTagProps {
+    className?: string;
+    e2eClassName?: string;
+    iconSlot?: Omit<ReactNode, string>;
+    label?: string;
+    text: string;
+    fill?: string;
+    content?: ReactNode;
+    footer?: ReactNode;
+    onClickAway?: (event: Event, closeDropdown?: () => void) => void;
+    onClick?: () => void;
+    shouldCloseOnClickAway?: boolean;
+}
+
+declare const FilterTag: ({ className, e2eClassName, label, text, iconSlot, fill, content, footer, onClickAway, onClick, shouldCloseOnClickAway, }: FilterTagProps) => React__default.JSX.Element;
+
+type GridProps = {
+    children: ReactNode;
+    className?: string;
+    columns: number;
+    spacing?: Size;
+};
+
+declare const Grid: styled_components.StyledComponent<"div", any, GridProps, never>;
+
+type ImageProps = {
+    src: string;
+    alt?: string;
+    className?: string;
+    e2eClassName?: string;
+    width?: string;
+    height?: string;
+    previewWidth?: string;
+    previewHeight?: string;
+    previewPlacement?: Placement;
+    previewEnabled?: boolean;
+    placeholder?: React__default.ReactNode;
+    placeholderWidth?: string;
+    placeholderHeight?: string;
+    disablePlaceholder?: boolean;
+};
+declare const Image: ({ src, alt, className, e2eClassName, width, height, previewWidth, previewHeight, previewPlacement, previewEnabled, placeholder, placeholderWidth, placeholderHeight, disablePlaceholder, }: ImageProps) => React__default.JSX.Element;
+
+declare const InputGroup: styled_components.StyledComponent<"div", any, {}, never>;
+
+type LoaderType = 'Grid' | 'TailSpin' | 'ThreeDots';
+interface LoaderProps {
+    className?: string;
+    height?: number;
+    width?: number;
+    color?: string;
+    type?: LoaderType;
+}
+
+declare const Loader: ({ className, height, width, color, type, }: LoaderProps) => React__default.JSX.Element;
+
 /**
- * Layout component.
+ * Image used in this button is to comply with official
+ * Amazon button guidelines (https://developer.amazon.com/docs/login-with-amazon/button.html#android-images).
  */
-declare const Stack: styled_components.IStyledComponent<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StackProps>>;
+declare const LoginWithAmazonButton: React__default.FC<React__default.ButtonHTMLAttributes<HTMLButtonElement>>;
 
-type SizeScale = {
-    [index: number]: string;
-    [index: string]: string;
+type ModalVariants = 'xs' | 'sm' | 'base' | 'lg';
+type BaseModalProps = {
+    shouldShow: boolean;
+    showHeaderCloseButton?: boolean;
+    fullBleed?: boolean;
+    variant?: ModalVariants;
+    onClose: () => void;
+    children: React.ReactNode;
+};
+type WithHeaderSlot = {
+    headerSlot: React.ReactNode;
+};
+type WithFooterSlot = {
+    footerSlot: React.ReactNode;
+};
+type DefaultHeaderOptions = {
+    headerTitle: string;
+    headerSubtitle?: string;
+};
+type ModalAction = {
+    label: string;
+} & ButtonProps;
+type DefaultFooterOptions = {
+    leftActions?: ModalAction[];
+    rightActions?: ModalAction[];
 };
+type HeaderOptions = WithHeaderSlot | DefaultHeaderOptions;
+type FooterOptions = WithFooterSlot | DefaultFooterOptions;
+type ModalProps = BaseModalProps & HeaderOptions & FooterOptions;
 
-declare enum shadows {
+declare const Modal: (props: ModalProps) => React__default.JSX.Element;
+
+declare enum Shadows {
     sm = "0px 1px 3px rgba(55, 66, 77, 0.15)",
     base = "0px 4px 6px rgba(27, 33, 38, 0.2)",
     md = "0px 10px 15px rgba(27, 33, 38, 0.2)",
     lg = "0px 20px 25px rgba(27, 33, 38, 0.2)"
 }
 
+declare const shadows: typeof Shadows;
+type ShadowPropType = keyof typeof shadows | 'none';
+
+type QuickAction = {
+    title: string;
+    icon: Omit<ReactNode, string>;
+    variant: ButtonVariant;
+    onClick: () => void;
+};
+type BackAction = {
+    title: string;
+    onClick: () => void;
+};
+type PageHeaderProps = {
+    title: string;
+    subtitle?: string;
+    imageSrc?: string;
+    actions?: ActionListSection[];
+    quickActions?: QuickAction[];
+    backAction?: BackAction;
+    Accessory?: ReactNode;
+    shadow?: ShadowPropType;
+    onClickPrevious?: () => void;
+    onClickNext?: () => void;
+    onClickToggleSidebar?: () => void;
+};
+declare const PageHeader: ({ title, subtitle, imageSrc, actions, quickActions, backAction, Accessory, shadow, onClickPrevious, onClickNext, onClickToggleSidebar, }: PageHeaderProps) => React__default.JSX.Element;
+
+type PaginationProps = {
+    testId?: string;
+    e2eClassName?: string;
+    currentPage: number;
+    totalPagesCount: number;
+    handleChangePage: (newPageIndex: number) => void;
+};
+
+declare const Pagination: ({ testId, e2eClassName, currentPage, totalPagesCount, handleChangePage, }: PaginationProps) => React__default.JSX.Element;
+
+interface PaginationRangeOption {
+    label: string;
+    value: number;
+}
+interface PaginationRangeProps {
+    className?: string;
+    dropdownValue?: PaginationRangeOption;
+    paginationRange?: PaginationRangeOption[];
+    reversedDropdown?: boolean;
+    onPaginationRangeChange: (currentItem: PaginationRangeOption) => void;
+}
+interface PaginationRangeState {
+    dropdownValue: PaginationRangeOption;
+    shouldShowDropdown: boolean;
+}
+
+declare class PaginationRange extends Component<PaginationRangeProps, PaginationRangeState> {
+    constructor(props: PaginationRangeProps);
+    handleRangeListChange: (item: PaginationRangeOption) => void;
+    setDropdownValue: (currentValue: PaginationRangeOption) => void;
+    toggleShouldShow: () => void;
+    render(): React__default.JSX.Element;
+}
+
+type PopoverProps = {
+    children: ReactNode;
+    className?: string;
+    anchorElement: HTMLElement | null;
+    rootElementRef?: HTMLElement;
+    placement?: Placement;
+    onShouldClose?: () => void;
+    zIndex?: number;
+};
+declare const Popover: ({ children, className, anchorElement, rootElementRef, placement, onShouldClose, zIndex, }: PopoverProps) => React__default.JSX.Element;
+
+type PortalProps = {
+    children: ReactNode;
+    rootElementRef?: HTMLElement;
+};
+type PortalState = {
+    isMounted: boolean;
+};
+/**
+ * The portal component renders content on the document `body` unless `rootElementRef` is passed.
+ */
+declare class Portal extends PureComponent<PortalProps, PortalState> {
+    id: string;
+    portalNode: HTMLElement | null;
+    constructor(props: PortalProps);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    render(): React.ReactPortal | null;
+}
+
+interface WithLabelsProps {
+    label?: string;
+    hint?: string | React__default.ReactNode;
+    error?: string;
+    tooltip?: string;
+}
+declare const withLabels: <P extends object>(Component: React__default.ComponentType<P>) => React__default.FC<P & WithLabelsProps>;
+
+interface CurrencyProps {
+    className?: string;
+    disabled?: boolean;
+    size?: ComponentSize;
+    currency: string;
+    step?: string;
+    hasError?: boolean;
+    priceValue: string;
+    onChange: (value: string) => void;
+    onPriceChange: (value: string) => void;
+}
+
+declare const PriceInput: React__default.FC<CurrencyProps & WithLabelsProps>;
+
+type RadioValue = string | number;
+interface RadioProps extends ForwardedChoiceProps {
+    checked: boolean;
+    value?: RadioValue;
+    disabled?: boolean;
+    name?: string;
+    onChange: (checked: boolean, value?: RadioValue) => void;
+}
+declare const Radio: ({ checked, value, name, disabled, onChange, ...otherProps }: RadioProps) => React__default.JSX.Element;
+
+type TextFieldType = 'text' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'url' | 'date' | 'datetime-local' | 'month' | 'time' | 'week' | 'currency';
+/**
+ * TextField properties.
+ */
+type TextFieldProps = Omit<EventHandlerProps, 'onChange' | 'onKeyDown'> & Pick<React.InputHTMLAttributes<HTMLInputElement>, 'autoComplete' | 'onKeyDown'> & {
+    className?: string;
+    /** Input element type */
+    type?: TextFieldType;
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    step?: string;
+    name?: string;
+    min?: string;
+    max?: string;
+    pattern?: string;
+    hasError?: boolean;
+    size?: ComponentSize;
+    multiline?: boolean;
+    rows?: string;
+    invalid?: boolean;
+    disabled?: boolean;
+    spellCheck?: boolean;
+};
+
+type SearchProps = TextFieldProps & {
+    isLoading?: boolean;
+    fill?: string;
+    onClearClick?: (event: SyntheticEvent) => void;
+    reversed?: boolean;
+    error?: string;
+};
+
+declare const Search: ({ type, disabled, onClearClick, onChange, onBlur, onFocus, onKeyUp, onKeyDown, onKeyPress, value, error, placeholder, className, name, isLoading, fill, reversed, autoComplete, }: SearchProps) => React__default.JSX.Element;
+
+type Option = {
+    key: string;
+    label: string;
+    value: string;
+    disabled?: boolean;
+};
+type SegmentedControlProps = {
+    options: Option[];
+    selected: string;
+    className?: string;
+    onChange: (selectedButton: string) => void;
+};
+
+declare const SegmentedControl: ({ options, selected, className, onChange, }: SegmentedControlProps) => React__default.JSX.Element;
+
+type SelectOption = {
+    label: string;
+    value: string;
+    disabled?: boolean;
+};
+interface SelectProps {
+    className?: string;
+    options: Array<SelectOption>;
+    value: string;
+    size?: 'sm' | 'base';
+    disabled?: boolean;
+    hasError?: boolean;
+    onChange: (value: string) => void;
+}
+declare const Select: React__default.FC<SelectProps & WithLabelsProps>;
+
+type TableCellProps = {
+    align?: 'left' | 'right' | 'center';
+};
+
+type SimpleTableProps = {
+    striped?: boolean;
+    className?: string;
+    children?: ReactNode;
+};
+
+/**
+ * A simple table component which provides flexible, pre-styled table elements.
+ */
+declare const SimpleTable: {
+    ({ striped, className, children }: SimpleTableProps): React__default.JSX.Element;
+    Header: styled_components.StyledComponent<"thead", any, {}, never>;
+    Body: styled_components.StyledComponent<"tbody", any, {}, never>;
+    Row: styled_components.StyledComponent<"tr", any, {}, never>;
+    HeaderCell: styled_components.StyledComponent<"td", any, TableCellProps & {
+        as: string;
+    }, "as">;
+    Cell: styled_components.StyledComponent<"td", any, TableCellProps, never>;
+};
+
+type SliderComponentPropTypes = {
+    id?: string;
+    value: number | number[];
+    min: number;
+    max: number;
+    step?: number;
+    className?: string;
+    e2eClassName?: string;
+    onChange: (value: number | number[]) => void;
+    onSlideStart?: () => void;
+    onSlideEnd?: () => void;
+};
+
+declare const Slider: ({ id, value, min, max, step, onChange, className, e2eClassName, onSlideStart, onSlideEnd, }: SliderComponentPropTypes) => React__default.JSX.Element;
+
+/**
+ * Layout component.
+ */
+declare const Stack: styled_components.StyledComponent<"div", any, StackProps, never>;
+
+interface StepperProps {
+    onIncrement: () => void;
+    onDecrement: () => void;
+    disabled?: boolean;
+    size?: ComponentSize;
+}
+declare const Stepper: ({ onIncrement, onDecrement, disabled, size }: StepperProps) => React__default.JSX.Element;
+
+interface TagProps {
+    backgroundColor?: string;
+    color?: string;
+}
+declare const Tag: styled_components.StyledComponent<"div", any, TagProps, never>;
+
+declare const Text: styled_components.StyledComponent<"span", any, {} & TextProps, never>;
+
+declare const TextField: React$1.FC<Omit<EventHandlerProps, "onChange" | "onKeyDown"> & Pick<React$1.InputHTMLAttributes<HTMLInputElement>, "onKeyDown" | "autoComplete"> & {
+    className?: string | undefined;
+    type?: TextFieldType | undefined;
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string | undefined;
+    step?: string | undefined;
+    name?: string | undefined;
+    min?: string | undefined;
+    max?: string | undefined;
+    pattern?: string | undefined;
+    hasError?: boolean | undefined;
+    size?: ComponentSize | undefined;
+    multiline?: boolean | undefined;
+    rows?: string | undefined;
+    invalid?: boolean | undefined;
+    disabled?: boolean | undefined;
+    spellCheck?: boolean | undefined;
+} & WithLabelsProps>;
+
+declare enum ToastTypes {
+    info = "info",
+    error = "error",
+    success = "success",
+    merge = "merge"
+}
+type ToastsLayoutPropTypes = {
+    className?: string;
+    e2eClassName?: string;
+    toasts: Notification[];
+    minWidth?: number | string;
+    max?: number | null;
+    onClose: (key: string) => void;
+};
+type Notification = {
+    key: string;
+    type: keyof typeof ToastTypes;
+    iconSlot?: Omit<ReactNode, string>;
+    text: string;
+    cta?: React.ReactNode;
+};
+
+declare const ToastsLayout: FC<ToastsLayoutPropTypes>;
+
+interface ToggleProps extends EventHandlerProps {
+    switched?: boolean;
+    name?: string;
+    small?: boolean;
+    className?: string;
+    disabled?: boolean;
+    ariaLabel?: string;
+}
+
+/**
+ * A toggle switch component, use-cases should wrap with a label or
+ */
+declare const Toggle: FC<ToggleProps>;
+
+interface ToggleButtonProps {
+    children: ReactNode;
+    checked: boolean;
+    size?: 'sm' | 'base';
+    disabled?: boolean;
+    onChange: (checked: boolean) => void;
+}
+declare const ToggleButton: ({ children, checked, size, disabled, onChange, }: ToggleButtonProps) => React__default.JSX.Element;
+
+interface IConfig {
+    duration: number;
+    side: Sides.TOP | Sides.BOTTOM;
+    triangleOffset: number;
+    tipMinWidth: number;
+    tipMaxWidth: number;
+    tipOffset?: number;
+}
+interface TooltipProps {
+    children?: any;
+    text?: string;
+    content?: ReactNode;
+    config?: IConfig;
+    reversed?: boolean;
+    additionalOffset?: number;
+    className?: string;
+    withTriangle?: boolean;
+    unmountOnExit?: boolean;
+    initialShouldShow?: boolean;
+    useReactPortal?: boolean;
+}
+declare enum Sides {
+    BOTTOM = "bottom",
+    TOP = "top"
+}
+
+declare const Tooltip: ({ children, text, content, config, reversed, className, withTriangle, initialShouldShow, useReactPortal, }: TooltipProps) => JSX.Element | null;
+
+interface VideoModalProps {
+    id: string;
+    youtubeVideoId: string;
+    showVideoModal: boolean;
+    handleCloseClick: () => void;
+}
+
+declare const VideoModal: ({ id, youtubeVideoId, showVideoModal, handleCloseClick, }: VideoModalProps) => React__default.JSX.Element;
+
+type ViewId = string;
+declare enum ViewTypes {
+    saved = "saved",
+    fixed = "fixed",
+    draft = "draft"
+}
+interface ViewProps {
+    /** ClassName to override styles on outer root element */
+    className?: string;
+    /** Flag to toggle active state styles on the Tab */
+    active?: boolean;
+    /** View name, eg.: Jade's view */
+    name: string;
+    /** View's unique identifier */
+    id: ViewId;
+    /** View type */
+    type?: keyof typeof ViewTypes;
+    /** Number or string value to show near view label */
+    count?: number | string;
+    /** Event handler for when View component is clicked (should get activated) */
+    onClick: (id: ViewId) => void;
+    /** Event handler for when user clicks the delete/cross icon */
+    onDelete?: (id: ViewId) => void;
+    /** Event handler for when user clicks to edit the view */
+    onEdit?: (id: ViewId) => void;
+    /** Event handler for when user clicks to show options for FIXED view */
+    onOptions?: (id: ViewId) => void;
+    /** Class name for e2e testing */
+    e2eClassName?: string;
+}
+
+declare const View: ({ id, name, type, className, count, active, onClick, onDelete, onEdit, onOptions, e2eClassName, }: ViewProps) => React__default.JSX.Element;
+
+interface BaseWeightProps {
+    hasError?: boolean;
+    size?: ComponentSize;
+    className?: string;
+}
+interface GramWeightProps extends BaseWeightProps {
+    weightUnit: WeightUnit.g;
+    gram: string;
+    handleChangeGram: (value: string) => void;
+}
+interface LbWeightProps extends BaseWeightProps {
+    weightUnit: WeightUnit.lb;
+    ounce: string;
+    pound: string;
+    handleChangeOunce: (value: string) => void;
+    handleChangePound: (value: string) => void;
+}
+type WeightProps = GramWeightProps | LbWeightProps;
+
+declare const WeightInput: FC<WeightProps>;
+
+/**
+ * Close a menu or modal by clicking out of it
+ */
+declare const useClickOutside: (isOpen: boolean, onClose: () => void) => React$1.MutableRefObject<null>;
+
+declare const useDebounce: (value: any, timeout: number) => any;
+
+declare function useDropdown(): {
+    shouldShowDropdown: boolean;
+    toggleShouldShowDropdown: () => void;
+    setShouldShowDropdown: (state: boolean) => void;
+    closeDropdown: () => void;
+};
+
+declare function useFocusVisible(): {
+    focusVisible: boolean;
+    onFocus: () => void;
+    onBlur: () => void;
+};
+
+declare const useHover: (initialState?: boolean) => readonly [boolean, () => void, () => void];
+
+/**
+ * A hook to check if a component's contents are overflowing from its boundaries
+ * (scrollbar is visible).
+ */
+declare const useIsOverflowing: (ref: HTMLElement | null) => {
+    isOverflowing: boolean;
+    onScroll: React$1.UIEventHandler<HTMLElement>;
+};
+
+interface TabsConfig {
+    defaultActiveIndex?: number;
+}
+type ITab = any;
+declare const useTabs: (tabs: ITab[], config?: TabsConfig) => readonly [any, (key: string) => void];
+
+declare const withDeprecated: <P extends object>(Component: React__default.ComponentType<P>) => React__default.FC<P>;
+
+declare const buildClassnames: (names: (string | undefined)[]) => string;
+
+/**
+ * A function to convert hex color to rgb.
+ */
+declare const hexToRgb: (hex: string) => {
+    r: number;
+    g: number;
+    b: number;
+} | null;
+/**
+ * A function to get a hex color with opacity, after converting to `rgba`.
+ * @param hex color in hex format
+ */
+declare const getOpaqueHexColor: (hex: string, opacity: number) => string;
+
+declare const generateId: (prefix: string) => string;
+
+type SizeScale = {
+    [index: number]: string;
+    [index: string]: string;
+};
+
 declare const theme: {
     breakpoints: {
         readonly mobile: "640px";
@@ -200,7 +1382,7 @@ declare const theme: {
         lg: string;
         full: string;
     };
-    shadows: typeof shadows;
+    shadows: typeof Shadows;
     sizes: SizeScale;
     text: {
         headingXXL: {
@@ -517,4 +1699,4 @@ declare const theme: {
     fontFamily: string;
 };
 
-export { Loader, Stack, theme };
+export { Accordion, ActionList, Anchor, AnimatedDropdown, Avatar, Badge, Banner, BaseContainer, Breadcrumbs, Button, Card, CardHeader, Checkbox, Choice, ChoiceList, CopyToClipboard, DataTable, DataTableExp, DescriptionList, DetailPage, DimensionsInput, FilterTag, Grid, Image, InputGroup, Loader, LoginWithAmazonButton, Modal, PageHeader, Pagination, PaginationRange, Popover, Portal, PriceInput, Radio, Search, SegmentedControl, Select, SimpleTable, Slider, Stack, Stepper, Tag, Text, TextField, ToastsLayout, Toggle, ToggleButton, Tooltip, VideoModal, View, WeightInput, buildClassnames, generateId, getOpaqueHexColor, hexToRgb, theme, useClickOutside, useDebounce, useDropdown, useFocusVisible, useHover, useIsOverflowing, useTabs, withDeprecated, withLabels };