@veeqo/ui 0.0.3 → 0.0.4

package/lib/index.d.ts

@@ -1,1702 +1,5 @@
-/// <reference types="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 { Placement } from '@popperjs/core';
-
-interface AccordionProps {
-    children: ReactNode;
-    label: string;
-    iconSlot?: ReactNode;
-    className?: string;
-    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 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",
-    center = "center",
-    end = "flex-end",
-    stretch = "stretch",
-    between = "space-between",
-    around = "space-around"
-}
-
-type Alignment = keyof typeof Alignments;
-type SizeScale$1 = {
-    [index: number]: string;
-    [index: string]: string;
-};
-declare const sizes: SizeScale$1;
-type Size = keyof typeof sizes;
-type StackProps = {
-    children: ReactNode;
-    /**
-     * Classname for description
-     */
-    className?: string;
-    /**
-     * Direction of component
-     */
-    direction?: 'vertical' | 'horizontal';
-    alignX?: Alignment;
-    alignY?: Alignment;
-    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;
-
-/**
- * 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 LoginWithAmazonButton: React__default.FC<React__default.ButtonHTMLAttributes<HTMLButtonElement>>;
-
-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 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";
-        readonly tablet: "720px";
-        readonly lgTablet: "960px";
-        readonly desktop: "1280px";
-        readonly lgDesktop: "1440px";
-    };
-    colors: {
-        brand: {
-            blue: {
-                lightest: string;
-                light: string;
-                base: string;
-                dark: string;
-                darkest: string;
-            };
-            peach: {
-                lightest: string;
-                light: string;
-                base: string;
-                dark: string;
-                darkest: string;
-            };
-        };
-        neutral: {
-            ink: {
-                lightest: string;
-                light: string;
-                base: string;
-                dark: string;
-            };
-            grey: {
-                lightest: string;
-                light: string;
-                base: string;
-                dark: string;
-            };
-            greyBlue: {
-                lightest: string;
-                light: string;
-                base: string;
-                dark: string;
-            };
-        };
-        secondary: {
-            red: {
-                lightest: string;
-                light: string;
-                base: string;
-                dark: string;
-                darkest: string;
-            };
-            yellow: {
-                lightest: string;
-                light: string;
-                base: string;
-                dark: string;
-                darkest: string;
-            };
-            green: {
-                lightest: string;
-                light: string;
-                base: string;
-                dark: string;
-                darkest: string;
-            };
-            lime: {
-                lightest: string;
-                light: string;
-                base: string;
-                dark: string;
-                darkest: string;
-            };
-            teal: {
-                lightest: string;
-                light: string;
-                base: string;
-                dark: string;
-                darkest: string;
-            };
-            aqua: {
-                lightest: string;
-                light: string;
-                base: string;
-                dark: string;
-                darkest: string;
-            };
-            purple: {
-                lightest: string;
-                light: string;
-                base: string;
-                dark: string;
-                darkest: string;
-            };
-            blue: {
-                lightest: string;
-                light: string;
-                base: string;
-                dark: string;
-                darkest: string;
-            };
-            pink: {
-                lightest: string;
-                light: string;
-                base: string;
-                dark: string;
-                darkest: string;
-            };
-            orange: {
-                lightest: string;
-                light: string;
-                base: string;
-                dark: string;
-                darkest: string;
-            };
-        };
-        system: {
-            scrollbar: {
-                thumb: string;
-                background: string;
-            };
-        };
-    };
-    layers: {
-        base: number;
-        popup: number;
-        modal: number;
-        tooltip: number;
-    };
-    radius: {
-        sm: string;
-        base: string;
-        md: string;
-        lg: string;
-        full: string;
-    };
-    shadows: typeof Shadows;
-    sizes: SizeScale;
-    text: {
-        headingXXL: {
-            fontFamily: string;
-            fontStyle: string;
-            fontWeight: number;
-            fontSize: string;
-            lineHeight: string;
-            color: string;
-            textDecoration: string;
-            letterSpacing: string;
-        };
-        headingXL: {
-            fontFamily: string;
-            fontStyle: string;
-            fontWeight: number;
-            fontSize: string;
-            lineHeight: string;
-            color: string;
-            textDecoration: string;
-            letterSpacing: string;
-        };
-        headingLarge: {
-            fontFamily: string;
-            fontStyle: string;
-            fontWeight: number;
-            fontSize: string;
-            lineHeight: string;
-            color: string;
-            textDecoration: string;
-            letterSpacing: string;
-        };
-        headingMedium: {
-            fontFamily: string;
-            fontStyle: string;
-            fontWeight: number;
-            fontSize: string;
-            lineHeight: string;
-            color: string;
-            textDecoration: string;
-            letterSpacing: string;
-        };
-        headingSmall: {
-            fontFamily: string;
-            fontStyle: string;
-            fontWeight: number;
-            fontSize: string;
-            lineHeight: string;
-            color: string;
-            textDecoration: string;
-            letterSpacing: string;
-        };
-        headingTable: {
-            fontFamily: string;
-            fontStyle: string;
-            fontWeight: number;
-            fontSize: string;
-            lineHeight: string;
-            color: string;
-            textDecoration: string;
-            letterSpacing: string;
-        };
-        subheadingLarge: {
-            fontFamily: string;
-            fontStyle: string;
-            fontWeight: string;
-            fontSize: string;
-            lineHeight: string;
-            color: string;
-            textDecoration: string;
-            letterSpacing: string;
-        };
-        subheadingMedium: {
-            fontFamily: string;
-            fontStyle: string;
-            fontWeight: string;
-            fontSize: string;
-            lineHeight: string;
-            color: string;
-            textDecoration: string;
-            letterSpacing: string;
-        };
-        subheadingSmall: {
-            fontFamily: string;
-            fontStyle: string;
-            fontWeight: string;
-            fontSize: string;
-            lineHeight: string;
-            color: string;
-            textDecoration: string;
-            letterSpacing: string;
-        };
-        subheadingSmallBold: {
-            fontFamily: string;
-            fontStyle: string;
-            fontWeight: number;
-            fontSize: string;
-            lineHeight: string;
-            color: string;
-            textDecoration: string;
-            letterSpacing: string;
-        };
-        body: {
-            fontFamily: string;
-            fontStyle: string;
-            fontWeight: string;
-            fontSize: string;
-            lineHeight: string;
-            color: string;
-            textDecoration: string;
-            letterSpacing: string;
-        };
-        bodySmall: {
-            fontFamily: string;
-            fontStyle: string;
-            fontWeight: string;
-            fontSize: string;
-            lineHeight: string;
-            color: string;
-            textDecoration: string;
-            letterSpacing: string;
-        };
-        bodyBold: {
-            fontFamily: string;
-            fontStyle: string;
-            fontWeight: number;
-            fontSize: string;
-            lineHeight: string;
-            color: string;
-            textDecoration: string;
-            letterSpacing: string;
-        };
-        bodyBoldDark: {
-            fontFamily: string;
-            fontStyle: string;
-            fontWeight: number;
-            fontSize: string;
-            lineHeight: string;
-            color: string;
-            textDecoration: string;
-            letterSpacing: string;
-        };
-        bodySmallBold: {
-            fontFamily: string;
-            fontStyle: string;
-            fontWeight: number;
-            fontSize: string;
-            lineHeight: string;
-            color: string;
-            textDecoration: string;
-            letterSpacing: string;
-        };
-        button: {
-            fontFamily: string;
-            fontStyle: string;
-            fontWeight: number;
-            fontSize: string;
-            lineHeight: string;
-            color: string;
-            textDecoration: string;
-            letterSpacing: string;
-        };
-        buttonSmall: {
-            fontFamily: string;
-            fontStyle: string;
-            fontWeight: number;
-            fontSize: string;
-            lineHeight: string;
-            color: string;
-            textDecoration: string;
-            letterSpacing: string;
-        };
-        linkLarge: {
-            fontFamily: string;
-            fontStyle: string;
-            fontWeight: string;
-            fontSize: string;
-            lineHeight: string;
-            color: string;
-            textDecoration: string;
-            letterSpacing: string;
-        };
-        linkMedium: {
-            fontFamily: string;
-            fontStyle: string;
-            fontWeight: string;
-            fontSize: string;
-            lineHeight: string;
-            color: string;
-            textDecoration: string;
-            letterSpacing: string;
-        };
-        link: {
-            fontFamily: string;
-            fontStyle: string;
-            fontWeight: string;
-            fontSize: string;
-            lineHeight: string;
-            color: string;
-            textDecoration: string;
-            letterSpacing: string;
-        };
-        linkSmall: {
-            fontFamily: string;
-            fontStyle: string;
-            fontWeight: string;
-            fontSize: string;
-            lineHeight: string;
-            color: string;
-            textDecoration: string;
-            letterSpacing: string;
-        };
-        inputLabel: {
-            fontFamily: string;
-            fontStyle: string;
-            fontWeight: number;
-            fontSize: string;
-            lineHeight: string;
-            color: string;
-            textDecoration: string;
-            letterSpacing: string;
-        };
-        inputLabelSmall: {
-            fontFamily: string;
-            fontStyle: string;
-            fontWeight: number;
-            fontSize: string;
-            lineHeight: string;
-            color: string;
-            textDecoration: string;
-            letterSpacing: string;
-        };
-        hintText: {
-            fontFamily: string;
-            fontStyle: string;
-            fontWeight: string;
-            fontSize: string;
-            lineHeight: string;
-            color: string;
-            textDecoration: string;
-            letterSpacing: string;
-        };
-        placeholder: {
-            fontFamily: string;
-            fontStyle: string;
-            fontWeight: string;
-            fontSize: string;
-            lineHeight: string;
-            color: string;
-            textDecoration: string;
-            letterSpacing: string;
-        };
-        placeholderSmall: {
-            fontFamily: string;
-            fontStyle: string;
-            fontWeight: string;
-            fontSize: string;
-            lineHeight: string;
-            color: string;
-            textDecoration: string;
-            letterSpacing: string;
-        };
-        placeholderCode: {
-            fontFamily: string;
-            fontStyle: string;
-            fontWeight: string;
-            fontSize: string;
-            lineHeight: string;
-            color: string;
-            textDecoration: string;
-            letterSpacing: string;
-        };
-        placeholderCodeSmall: {
-            fontFamily: string;
-            fontStyle: string;
-            fontWeight: string;
-            fontSize: string;
-            lineHeight: string;
-            color: string;
-            textDecoration: string;
-            letterSpacing: string;
-        };
-        error: {
-            fontFamily: string;
-            fontStyle: string;
-            fontWeight: number;
-            fontSize: string;
-            lineHeight: string;
-            color: string;
-            textDecoration: string;
-            letterSpacing: string;
-        };
-        errorSmall: {
-            fontFamily: string;
-            fontStyle: string;
-            fontWeight: number;
-            fontSize: string;
-            lineHeight: string;
-            color: string;
-            textDecoration: string;
-            letterSpacing: string;
-        };
-        successSmall: {
-            fontFamily: string;
-            fontStyle: string;
-            fontWeight: number;
-            fontSize: string;
-            lineHeight: string;
-            color: string;
-            textDecoration: string;
-            letterSpacing: string;
-        };
-    };
-    fontFamily: string;
-};
-
-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 };
+export * from './components';
+export * from './hooks';
+export * from './hoc';
+export * from './utils';
+export * from './theme';