import * as react from 'react';
import { JSXElementConstructor, CSSProperties, ReactNode, ElementType, HTMLProps, ButtonHTMLAttributes, MouseEventHandler, ReactElement, ChangeEventHandler, FocusEventHandler, JSX, MouseEvent } from 'react';
import { SerializedStyles } from '@emotion/react';
import { StandardShorthandProperties, StandardLonghandProperties } from 'csstype';
import { LiteralToPrimitive, ValueOf, RequireExactlyOne, PartialDeep } from 'type-fest';
import { Option, Props, HiddenInput } from '@gilbarbara/react-dropdown';
import { StringOrNumber, AnyObject } from '@gilbarbara/types';
import * as react_jsx_runtime from 'react/jsx-runtime';
import { DayPickerSingleProps, DayPickerRangeProps } from 'react-day-picker';
import { FieldValues, UseFormReturn, UseFormProps } from 'react-hook-form';
export { SubmitHandler as FormSubmitHandler } from 'react-hook-form';
import * as _emotion_serialize from '@emotion/serialize';
import * as _emotion_utils from '@emotion/utils';
export { px } from '@gilbarbara/helpers';

type MapLiteralToPrimitive<T extends Record<string, unknown>> = {
    [K in keyof T]: T[K] extends object ? T[K] : LiteralToPrimitive<T[K]>;
};

/**
 * Basics
 */
declare const fontFamily = "inherit";
declare const fontMonospace = "Courier, monospace";
declare const fontWeights: {
    normal: number;
    bold: number;
};
declare const breakpoints: {
    xxs: string;
    xs: string;
    sm: string;
    md: string;
    lg: string;
    xl: string;
    xxl: string;
    xxxl: string;
};
declare const easing = "cubic-bezier(0.35, 0.01, 0.77, 0.34);";
declare const opacity: {
    semiOpaque: number;
    intense: number;
    medium: number;
    light: number;
    semiTransparent: number;
};
declare const radius: {
    xxs: string;
    xs: string;
    sm: string;
    md: string;
    lg: string;
    xl: string;
    round: string;
};
declare const dropShadow: {
    low: string;
    mid: string;
    high: string;
};
declare const shadow: {
    low: string;
    mid: string;
    high: string;
};
declare const spacing: {
    xxs: string;
    xs: string;
    sm: string;
    md: string;
    lg: string;
    xl: string;
    xxl: string;
    xxxl: string;
    jumbo: string;
};
declare const typography: {
    small: {
        fontSize: string;
        lineHeight: number;
    };
    mid: {
        fontSize: string;
        lineHeight: number;
    };
    regular: {
        fontSize: string;
        lineHeight: number;
    };
    large: {
        fontSize: string;
        lineHeight: number;
    };
    h6: {
        fontSize: string;
        lineHeight: number;
    };
    h5: {
        fontSize: string;
        lineHeight: number;
    };
    h4: {
        fontSize: string;
        lineHeight: number;
    };
    h3: {
        fontSize: string;
        lineHeight: number;
    };
    h2: {
        fontSize: string;
        lineHeight: number;
    };
    h1: {
        fontSize: string;
        lineHeight: number;
    };
    jumbo: {
        fontSize: string;
        lineHeight: number;
    };
    jumboLarge: {
        fontSize: string;
        lineHeight: number;
    };
};
/**
 * Colors
 */
declare const black = "#000";
declare const white = "#fff";
declare const darkColor = "#101010";
declare const lightColor = "#f5f5f5";
declare const gray = "#808080";
declare const grayLightest = "#f5f5f5";
declare const grayLighter = "#e0e0e0";
declare const grayLight = "#c0c0c0";
declare const grayMid = "#767676";
declare const grayDark = "#484848";
declare const grayDarker = "#242424";
declare const grayDarkest = "#101010";
declare const grayScale: {
    '1': string;
    '2': string;
    '3': string;
    '4': string;
    '5': string;
    '10': string;
    '15': string;
    '20': string;
    '30': string;
    '40': string;
    '50': string;
    '60': string;
    '70': string;
    '80': string;
    '90': string;
    '95': string;
};
declare const colors: {
    primary: string;
    secondary: string;
    blue: string;
    green: string;
    orange: string;
    pink: string;
    purple: string;
    red: string;
    yellow: string;
};
declare const variants: {
    primary: {
        lightest: {
            bg: string;
            color: string;
        };
        lighter: {
            bg: string;
            color: string;
        };
        light: {
            bg: string;
            color: string;
        };
        mid: {
            bg: string;
            color: string;
        };
        dark: {
            bg: string;
            color: string;
        };
        darker: {
            bg: string;
            color: string;
        };
        darkest: {
            bg: string;
            color: string;
        };
    };
    secondary: {
        lightest: {
            bg: string;
            color: string;
        };
        lighter: {
            bg: string;
            color: string;
        };
        light: {
            bg: string;
            color: string;
        };
        mid: {
            bg: string;
            color: string;
        };
        dark: {
            bg: string;
            color: string;
        };
        darker: {
            bg: string;
            color: string;
        };
        darkest: {
            bg: string;
            color: string;
        };
    };
    blue: {
        lightest: {
            bg: string;
            color: string;
        };
        lighter: {
            bg: string;
            color: string;
        };
        light: {
            bg: string;
            color: string;
        };
        mid: {
            bg: string;
            color: string;
        };
        dark: {
            bg: string;
            color: string;
        };
        darker: {
            bg: string;
            color: string;
        };
        darkest: {
            bg: string;
            color: string;
        };
    };
    gray: {
        lightest: {
            bg: string;
            color: string;
        };
        lighter: {
            bg: string;
            color: string;
        };
        light: {
            bg: string;
            color: string;
        };
        mid: {
            bg: string;
            color: string;
        };
        dark: {
            bg: string;
            color: string;
        };
        darker: {
            bg: string;
            color: string;
        };
        darkest: {
            bg: string;
            color: string;
        };
    };
    green: {
        lightest: {
            bg: string;
            color: string;
        };
        lighter: {
            bg: string;
            color: string;
        };
        light: {
            bg: string;
            color: string;
        };
        mid: {
            bg: string;
            color: string;
        };
        dark: {
            bg: string;
            color: string;
        };
        darker: {
            bg: string;
            color: string;
        };
        darkest: {
            bg: string;
            color: string;
        };
    };
    orange: {
        lightest: {
            bg: string;
            color: string;
        };
        lighter: {
            bg: string;
            color: string;
        };
        light: {
            bg: string;
            color: string;
        };
        mid: {
            bg: string;
            color: string;
        };
        dark: {
            bg: string;
            color: string;
        };
        darker: {
            bg: string;
            color: string;
        };
        darkest: {
            bg: string;
            color: string;
        };
    };
    pink: {
        lightest: {
            bg: string;
            color: string;
        };
        lighter: {
            bg: string;
            color: string;
        };
        light: {
            bg: string;
            color: string;
        };
        mid: {
            bg: string;
            color: string;
        };
        dark: {
            bg: string;
            color: string;
        };
        darker: {
            bg: string;
            color: string;
        };
        darkest: {
            bg: string;
            color: string;
        };
    };
    purple: {
        lightest: {
            bg: string;
            color: string;
        };
        lighter: {
            bg: string;
            color: string;
        };
        light: {
            bg: string;
            color: string;
        };
        mid: {
            bg: string;
            color: string;
        };
        dark: {
            bg: string;
            color: string;
        };
        darker: {
            bg: string;
            color: string;
        };
        darkest: {
            bg: string;
            color: string;
        };
    };
    red: {
        lightest: {
            bg: string;
            color: string;
        };
        lighter: {
            bg: string;
            color: string;
        };
        light: {
            bg: string;
            color: string;
        };
        mid: {
            bg: string;
            color: string;
        };
        dark: {
            bg: string;
            color: string;
        };
        darker: {
            bg: string;
            color: string;
        };
        darkest: {
            bg: string;
            color: string;
        };
    };
    yellow: {
        lightest: {
            bg: string;
            color: string;
        };
        lighter: {
            bg: string;
            color: string;
        };
        light: {
            bg: string;
            color: string;
        };
        mid: {
            bg: string;
            color: string;
        };
        dark: {
            bg: string;
            color: string;
        };
        darker: {
            bg: string;
            color: string;
        };
        darkest: {
            bg: string;
            color: string;
        };
    };
};
/**
 * Components
 */
declare const button: {
    borderRadius: {
        xs: string;
        sm: string;
        md: string;
        lg: string;
    };
    fontSize: {
        xs: string;
        sm: string;
        md: string;
        lg: string;
    };
    fontWeight: number;
    height: {
        xs: string;
        sm: string;
        md: string;
        lg: string;
    };
    lineHeight: {
        xs: number;
        sm: number;
        md: number;
        lg: number;
    };
    padding: {
        xs: string[];
        sm: string[];
        md: string[];
        lg: string[];
    };
};
declare const inputHeight: {
    normal: string;
    large: string;
};

declare const theme_black: typeof black;
declare const theme_breakpoints: typeof breakpoints;
declare const theme_button: typeof button;
declare const theme_colors: typeof colors;
declare const theme_darkColor: typeof darkColor;
declare const theme_dropShadow: typeof dropShadow;
declare const theme_easing: typeof easing;
declare const theme_fontFamily: typeof fontFamily;
declare const theme_fontMonospace: typeof fontMonospace;
declare const theme_fontWeights: typeof fontWeights;
declare const theme_gray: typeof gray;
declare const theme_grayDark: typeof grayDark;
declare const theme_grayDarker: typeof grayDarker;
declare const theme_grayDarkest: typeof grayDarkest;
declare const theme_grayLight: typeof grayLight;
declare const theme_grayLighter: typeof grayLighter;
declare const theme_grayLightest: typeof grayLightest;
declare const theme_grayMid: typeof grayMid;
declare const theme_grayScale: typeof grayScale;
declare const theme_inputHeight: typeof inputHeight;
declare const theme_lightColor: typeof lightColor;
declare const theme_opacity: typeof opacity;
declare const theme_radius: typeof radius;
declare const theme_shadow: typeof shadow;
declare const theme_spacing: typeof spacing;
declare const theme_typography: typeof typography;
declare const theme_variants: typeof variants;
declare const theme_white: typeof white;
declare namespace theme {
  export {
    theme_black as black,
    theme_breakpoints as breakpoints,
    theme_button as button,
    theme_colors as colors,
    theme_darkColor as darkColor,
    theme_dropShadow as dropShadow,
    theme_easing as easing,
    theme_fontFamily as fontFamily,
    theme_fontMonospace as fontMonospace,
    theme_fontWeights as fontWeights,
    theme_gray as gray,
    theme_grayDark as grayDark,
    theme_grayDarker as grayDarker,
    theme_grayDarkest as grayDarkest,
    theme_grayLight as grayLight,
    theme_grayLighter as grayLighter,
    theme_grayLightest as grayLightest,
    theme_grayMid as grayMid,
    theme_grayScale as grayScale,
    theme_inputHeight as inputHeight,
    theme_lightColor as lightColor,
    theme_opacity as opacity,
    theme_radius as radius,
    theme_shadow as shadow,
    theme_spacing as spacing,
    theme_typography as typography,
    theme_variants as variants,
    theme_white as white,
  };
}

type BaseTheme = MapLiteralToPrimitive<typeof theme>;
type Breakpoints = keyof typeof breakpoints;
type Colors = keyof typeof colors;
type Radius = keyof typeof radius;
type Shades = keyof typeof variants.primary;
type Shadow = keyof typeof shadow;
type Spacing = keyof typeof spacing;
type Typography = keyof typeof typography;
type ColorVariants = keyof typeof colors | 'gray';
type Variants = ColorVariants | 'black' | 'white';
interface Theme extends BaseTheme {
    darkMode?: boolean;
}

declare const icons: ({
    name: "alarm";
    categories: string[];
} | {
    name: "album";
    categories: string[];
} | {
    name: "align-bottom";
    categories: string[];
} | {
    name: "align-center";
    categories: string[];
} | {
    name: "align-left";
    categories: string[];
} | {
    name: "align-middle";
    categories: string[];
} | {
    name: "align-right";
    categories: string[];
} | {
    name: "align-top";
    categories: string[];
} | {
    name: "anchor";
    categories: string[];
} | {
    name: "apple-watch";
    categories: string[];
} | {
    name: "arrange-back";
    categories: string[];
} | {
    name: "arrange-front";
    categories: string[];
} | {
    name: "arrow-align-h";
    categories: string[];
} | {
    name: "arrow-align-v";
    categories: string[];
} | {
    name: "arrow-bottom-left-o";
    categories: string[];
} | {
    name: "arrow-bottom-left-r";
    categories: string[];
} | {
    name: "arrow-bottom-left";
    categories: string[];
} | {
    name: "arrow-bottom-right-o";
    categories: string[];
} | {
    name: "arrow-bottom-right-r";
    categories: string[];
} | {
    name: "arrow-bottom-right";
    categories: string[];
} | {
    name: "arrow-down-o";
    categories: string[];
} | {
    name: "arrow-down-r";
    categories: string[];
} | {
    name: "arrow-down";
    categories: string[];
} | {
    name: "arrow-left-o";
    categories: string[];
} | {
    name: "arrow-left-r";
    categories: string[];
} | {
    name: "arrow-left";
    categories: string[];
} | {
    name: "arrow-long-down-c";
    categories: string[];
} | {
    name: "arrow-long-down-e";
    categories: string[];
} | {
    name: "arrow-long-down-l";
    categories: string[];
} | {
    name: "arrow-long-down-r";
    categories: string[];
} | {
    name: "arrow-long-down";
    categories: string[];
} | {
    name: "arrow-long-left-c";
    categories: string[];
} | {
    name: "arrow-long-left-e";
    categories: string[];
} | {
    name: "arrow-long-left-l";
    categories: string[];
} | {
    name: "arrow-long-left-r";
    categories: string[];
} | {
    name: "arrow-long-left";
    categories: string[];
} | {
    name: "arrow-long-right-c";
    categories: string[];
} | {
    name: "arrow-long-right-e";
    categories: string[];
} | {
    name: "arrow-long-right-l";
    categories: string[];
} | {
    name: "arrow-long-right-r";
    categories: string[];
} | {
    name: "arrow-long-right";
    categories: string[];
} | {
    name: "arrow-long-up-c";
    categories: string[];
} | {
    name: "arrow-long-up-e";
    categories: string[];
} | {
    name: "arrow-long-up-l";
    categories: string[];
} | {
    name: "arrow-long-up-r";
    categories: string[];
} | {
    name: "arrow-long-up";
    categories: string[];
} | {
    name: "arrow-right-o";
    categories: string[];
} | {
    name: "arrow-right-r";
    categories: string[];
} | {
    name: "arrow-right";
    categories: string[];
} | {
    name: "arrow-top-left-o";
    categories: string[];
} | {
    name: "arrow-top-left-r";
    categories: string[];
} | {
    name: "arrow-top-left";
    categories: string[];
} | {
    name: "arrow-top-right-o";
    categories: string[];
} | {
    name: "arrow-top-right-r";
    categories: string[];
} | {
    name: "arrow-top-right";
    categories: string[];
} | {
    name: "arrow-up-o";
    categories: string[];
} | {
    name: "arrow-up-r";
    categories: string[];
} | {
    name: "arrow-up";
    categories: string[];
} | {
    name: "arrows-breake-h";
    categories: string[];
} | {
    name: "arrows-breake-v";
    categories: string[];
} | {
    name: "arrows-exchange-alt-v";
    categories: string[];
} | {
    name: "arrows-exchange-alt";
    categories: string[];
} | {
    name: "arrows-exchange-v";
    categories: string[];
} | {
    name: "arrows-exchange";
    categories: string[];
} | {
    name: "arrows-expand-down-left";
    categories: string[];
} | {
    name: "arrows-expand-down-right";
    categories: string[];
} | {
    name: "arrows-expand-left-alt";
    categories: string[];
} | {
    name: "arrows-expand-left";
    categories: string[];
} | {
    name: "arrows-expand-right-alt";
    categories: string[];
} | {
    name: "arrows-expand-right";
    categories: string[];
} | {
    name: "arrows-expand-up-left";
    categories: string[];
} | {
    name: "arrows-expand-up-right";
    categories: string[];
} | {
    name: "arrows-h-alt";
    categories: string[];
} | {
    name: "arrows-h";
    categories: string[];
} | {
    name: "arrows-merge-alt-h";
    categories: string[];
} | {
    name: "arrows-merge-alt-v";
    categories: string[];
} | {
    name: "arrows-scroll-h";
    categories: string[];
} | {
    name: "arrows-scroll-v";
    categories: string[];
} | {
    name: "arrows-shrink-h";
    categories: string[];
} | {
    name: "arrows-shrink-v";
    categories: string[];
} | {
    name: "arrows-v-alt";
    categories: string[];
} | {
    name: "arrows-v";
    categories: string[];
} | {
    name: "assign";
    categories: string[];
} | {
    name: "asterisk";
    categories: string[];
} | {
    name: "attachment";
    categories: string[];
} | {
    name: "attribution";
    categories: string[];
} | {
    name: "awards";
    categories: string[];
} | {
    name: "backspace";
    categories: string[];
} | {
    name: "band-aid";
    categories: string[];
} | {
    name: "battery";
    categories: string[];
} | {
    name: "battery-empty";
    categories: string[];
} | {
    name: "battery-full";
    categories: string[];
} | {
    name: "bell";
    categories: string[];
} | {
    name: "board";
    categories: string[];
} | {
    name: "bolt";
    categories: string[];
} | {
    name: "bookmark";
    categories: string[];
} | {
    name: "border-all";
    categories: string[];
} | {
    name: "border-bottom";
    categories: string[];
} | {
    name: "border-left";
    categories: string[];
} | {
    name: "border-right";
    categories: string[];
} | {
    name: "border-style-dashed";
    categories: string[];
} | {
    name: "border-style-dotted";
    categories: string[];
} | {
    name: "border-style-solid";
    categories: string[];
} | {
    name: "border-top";
    categories: string[];
} | {
    name: "bot";
    categories: string[];
} | {
    name: "bowl";
    categories: string[];
} | {
    name: "box";
    categories: string[];
} | {
    name: "boy";
    categories: string[];
} | {
    name: "briefcase";
    categories: string[];
} | {
    name: "browse";
    categories: string[];
} | {
    name: "browser";
    categories: string[];
} | {
    name: "brush";
    categories: string[];
} | {
    name: "bulb";
    categories: string[];
} | {
    name: "calculator";
    categories: string[];
} | {
    name: "calendar-dates";
    categories: string[];
} | {
    name: "calendar-due";
    categories: string[];
} | {
    name: "calendar-next";
    categories: string[];
} | {
    name: "calendar-today";
    categories: string[];
} | {
    name: "calendar-two";
    categories: string[];
} | {
    name: "calendar";
    categories: string[];
} | {
    name: "calibrate";
    categories: string[];
} | {
    name: "cap";
    categories: string[];
} | {
    name: "captions";
    categories: string[];
} | {
    name: "card-clubs";
    categories: string[];
} | {
    name: "card-diamonds";
    categories: string[];
} | {
    name: "card-hearts";
    categories: string[];
} | {
    name: "card-spades";
    categories: string[];
} | {
    name: "carousel";
    categories: string[];
} | {
    name: "cast";
    categories: string[];
} | {
    name: "chart";
    categories: string[];
} | {
    name: "check-o";
    categories: string[];
} | {
    name: "check-r";
    categories: string[];
} | {
    name: "chevron-double-down-o";
    categories: string[];
} | {
    name: "chevron-double-down-r";
    categories: string[];
} | {
    name: "chevron-double-left-o";
    categories: string[];
} | {
    name: "chevron-double-left-r";
    categories: string[];
} | {
    name: "chevron-double-right-o";
    categories: string[];
} | {
    name: "chevron-double-right-r";
    categories: string[];
} | {
    name: "chevron-double-up-o";
    categories: string[];
} | {
    name: "chevron-double-up-r";
    categories: string[];
} | {
    name: "chevron-down-o";
    categories: string[];
} | {
    name: "chevron-down-r";
    categories: string[];
} | {
    name: "chevron-down";
    categories: string[];
} | {
    name: "chevron-left-o";
    categories: string[];
} | {
    name: "chevron-left-r";
    categories: string[];
} | {
    name: "chevron-left";
    categories: string[];
} | {
    name: "chevron-right-o";
    categories: string[];
} | {
    name: "chevron-right-r";
    categories: string[];
} | {
    name: "chevron-right";
    categories: string[];
} | {
    name: "chevron-up-o";
    categories: string[];
} | {
    name: "chevron-up-r";
    categories: string[];
} | {
    name: "chevron-up";
    categories: string[];
} | {
    name: "clapper-board";
    categories: string[];
} | {
    name: "clipboard";
    categories: string[];
} | {
    name: "close-o";
    categories: string[];
} | {
    name: "close-r";
    categories: string[];
} | {
    name: "close";
    categories: string[];
} | {
    name: "cloud";
    categories: string[];
} | {
    name: "code";
    categories: string[];
} | {
    name: "code-slash";
    categories: string[];
} | {
    name: "coffee";
    categories: string[];
} | {
    name: "collage";
    categories: string[];
} | {
    name: "color-bucket";
    categories: string[];
} | {
    name: "color-picker";
    categories: string[];
} | {
    name: "comment";
    categories: string[];
} | {
    name: "community";
    categories: string[];
} | {
    name: "components";
    categories: string[];
} | {
    name: "compress-left";
    categories: string[];
} | {
    name: "compress-right";
    categories: string[];
} | {
    name: "compress-v";
    categories: string[];
} | {
    name: "compress";
    categories: string[];
} | {
    name: "controller";
    categories: string[];
} | {
    name: "copy";
    categories: string[];
} | {
    name: "copyright";
    categories: string[];
} | {
    name: "corner-double-down-left";
    categories: string[];
} | {
    name: "corner-double-down-right";
    categories: string[];
} | {
    name: "corner-double-left-down";
    categories: string[];
} | {
    name: "corner-double-left-up";
    categories: string[];
} | {
    name: "corner-double-right-down";
    categories: string[];
} | {
    name: "corner-double-right-up";
    categories: string[];
} | {
    name: "corner-double-up-left";
    categories: string[];
} | {
    name: "corner-double-up-right";
    categories: string[];
} | {
    name: "corner-down-left";
    categories: string[];
} | {
    name: "corner-down-right";
    categories: string[];
} | {
    name: "corner-left-down";
    categories: string[];
} | {
    name: "corner-left-up";
    categories: string[];
} | {
    name: "corner-right-down";
    categories: string[];
} | {
    name: "corner-right-up";
    categories: string[];
} | {
    name: "corner-up-left";
    categories: string[];
} | {
    name: "corner-up-right";
    categories: string[];
} | {
    name: "credit-card";
    categories: string[];
} | {
    name: "crop";
    categories: string[];
} | {
    name: "crown";
    categories: string[];
} | {
    name: "dark-mode";
    categories: string[];
} | {
    name: "data";
    categories: string[];
} | {
    name: "database";
    categories: string[];
} | {
    name: "debug";
    categories: string[];
} | {
    name: "desktop";
    categories: string[];
} | {
    name: "details-less";
    categories: string[];
} | {
    name: "details-more";
    categories: string[];
} | {
    name: "dialpad";
    categories: string[];
} | {
    name: "dice-1";
    categories: string[];
} | {
    name: "dice-2";
    categories: string[];
} | {
    name: "dice-3";
    categories: string[];
} | {
    name: "dice-4";
    categories: string[];
} | {
    name: "dice-5";
    categories: string[];
} | {
    name: "dice-6";
    categories: string[];
} | {
    name: "disc";
    categories: string[];
} | {
    name: "display-flex";
    categories: string[];
} | {
    name: "display-fullwidth";
    categories: string[];
} | {
    name: "display-grid";
    categories: string[];
} | {
    name: "display-spacing";
    categories: string[];
} | {
    name: "distribute-horizontal";
    categories: string[];
} | {
    name: "distribute-vertical";
    categories: string[];
} | {
    name: "dock-bottom";
    categories: string[];
} | {
    name: "dock-left";
    categories: string[];
} | {
    name: "dock-right";
    categories: string[];
} | {
    name: "dock-window";
    categories: string[];
} | {
    name: "dollar";
    categories: string[];
} | {
    name: "drive";
    categories: string[];
} | {
    name: "drop-invert";
    categories: string[];
} | {
    name: "drop-opacity";
    categories: string[];
} | {
    name: "drop";
    categories: string[];
} | {
    name: "duplicate";
    categories: string[];
} | {
    name: "edit-black-point";
    categories: string[];
} | {
    name: "edit-contrast";
    categories: string[];
} | {
    name: "edit-exposure";
    categories: string[];
} | {
    name: "edit-fade";
    categories: string[];
} | {
    name: "edit-flip-h";
    categories: string[];
} | {
    name: "edit-flip-v";
    categories: string[];
} | {
    name: "edit-highlight";
    categories: string[];
} | {
    name: "edit-markup";
    categories: string[];
} | {
    name: "edit-mask";
    categories: string[];
} | {
    name: "edit-noise";
    categories: string[];
} | {
    name: "edit-shadows";
    categories: string[];
} | {
    name: "edit-straight";
    categories: string[];
} | {
    name: "edit-unmask";
    categories: string[];
} | {
    name: "eject";
    categories: string[];
} | {
    name: "enter";
    categories: string[];
} | {
    name: "erase";
    categories: string[];
} | {
    name: "ereader";
    categories: string[];
} | {
    name: "ethernet";
    categories: string[];
} | {
    name: "euro";
    categories: string[];
} | {
    name: "expand";
    categories: string[];
} | {
    name: "export";
    categories: string[];
} | {
    name: "extension-add";
    categories: string[];
} | {
    name: "extension-alt";
    categories: string[];
} | {
    name: "extension-remove";
    categories: string[];
} | {
    name: "extension";
    categories: string[];
} | {
    name: "external";
    categories: string[];
} | {
    name: "eye-alt";
    categories: string[];
} | {
    name: "eye";
    categories: string[];
} | {
    name: "feed";
    categories: string[];
} | {
    name: "file-add";
    categories: string[];
} | {
    name: "file-document";
    categories: string[];
} | {
    name: "file-remove";
    categories: string[];
} | {
    name: "file";
    categories: string[];
} | {
    name: "film";
    categories: string[];
} | {
    name: "filters";
    categories: string[];
} | {
    name: "flag-alt";
    categories: string[];
} | {
    name: "flag";
    categories: string[];
} | {
    name: "folder-add";
    categories: string[];
} | {
    name: "folder-remove";
    categories: string[];
} | {
    name: "folder";
    categories: string[];
} | {
    name: "font-height";
    categories: string[];
} | {
    name: "font-spacing";
    categories: string[];
} | {
    name: "format-center";
    categories: string[];
} | {
    name: "format-color";
    categories: string[];
} | {
    name: "format-heading";
    categories: string[];
} | {
    name: "format-indent-decrease";
    categories: string[];
} | {
    name: "format-indent-increase";
    categories: string[];
} | {
    name: "format-italic";
    categories: string[];
} | {
    name: "format-justify";
    categories: string[];
} | {
    name: "format-left";
    categories: string[];
} | {
    name: "format-line-height";
    categories: string[];
} | {
    name: "format-right";
    categories: string[];
} | {
    name: "format-separator";
    categories: string[];
} | {
    name: "format-slash";
    categories: string[];
} | {
    name: "format-strike";
    categories: string[];
} | {
    name: "format-text";
    categories: string[];
} | {
    name: "format-underline";
    categories: string[];
} | {
    name: "format-uppercase";
    categories: string[];
} | {
    name: "games";
    categories: string[];
} | {
    name: "gender-female";
    categories: string[];
} | {
    name: "gender-male";
    categories: string[];
} | {
    name: "gift";
    categories: string[];
} | {
    name: "girl";
    categories: string[];
} | {
    name: "git-branch";
    categories: string[];
} | {
    name: "git-commit";
    categories: string[];
} | {
    name: "git-fork";
    categories: string[];
} | {
    name: "git-pull";
    categories: string[];
} | {
    name: "glass-alt";
    categories: string[];
} | {
    name: "globe-alt";
    categories: string[];
} | {
    name: "globe";
    categories: string[];
} | {
    name: "gym";
    categories: string[];
} | {
    name: "hashtag";
    categories: string[];
} | {
    name: "headset";
    categories: string[];
} | {
    name: "heart";
    categories: string[];
} | {
    name: "hello";
    categories: string[];
} | {
    name: "home-alt";
    categories: string[];
} | {
    name: "home-screen";
    categories: string[];
} | {
    name: "home";
    categories: string[];
} | {
    name: "icecream";
    categories: string[];
} | {
    name: "image";
    categories: string[];
} | {
    name: "import";
    categories: string[];
} | {
    name: "inbox";
    categories: string[];
} | {
    name: "infinity";
    categories: string[];
} | {
    name: "inpicture";
    categories: string[];
} | {
    name: "insert-after-o";
    categories: string[];
} | {
    name: "insert-after-r";
    categories: string[];
} | {
    name: "insert-after";
    categories: string[];
} | {
    name: "insert-before-o";
    categories: string[];
} | {
    name: "insert-before-r";
    categories: string[];
} | {
    name: "insert-before";
    categories: string[];
} | {
    name: "insights";
    categories: string[];
} | {
    name: "internal";
    categories: string[];
} | {
    name: "key";
    categories: string[];
} | {
    name: "keyboard";
    categories: string[];
} | {
    name: "laptop";
    categories: string[];
} | {
    name: "layout-grid-small";
    categories: string[];
} | {
    name: "layout-grid";
    categories: string[];
} | {
    name: "layout-list";
    categories: string[];
} | {
    name: "layout-pin";
    categories: string[];
} | {
    name: "link";
    categories: string[];
} | {
    name: "list-tree";
    categories: string[];
} | {
    name: "list";
    categories: string[];
} | {
    name: "live-photo";
    categories: string[];
} | {
    name: "lock-unlock";
    categories: string[];
} | {
    name: "lock";
    categories: string[];
} | {
    name: "log-in";
    categories: string[];
} | {
    name: "log-off";
    categories: string[];
} | {
    name: "log-out";
    categories: string[];
} | {
    name: "loupe";
    categories: string[];
} | {
    name: "magnet";
    categories: string[];
} | {
    name: "mail-forward";
    categories: string[];
} | {
    name: "mail-open";
    categories: string[];
} | {
    name: "mail-reply";
    categories: string[];
} | {
    name: "mail";
    categories: string[];
} | {
    name: "math-divide";
    categories: string[];
} | {
    name: "math-equal";
    categories: string[];
} | {
    name: "math-minus";
    categories: string[];
} | {
    name: "math-percent";
    categories: string[];
} | {
    name: "math-plus";
    categories: string[];
} | {
    name: "maximize-alt";
    categories: string[];
} | {
    name: "maximize";
    categories: string[];
} | {
    name: "media-live";
    categories: string[];
} | {
    name: "media-podcast";
    categories: string[];
} | {
    name: "menu-boxed";
    categories: string[];
} | {
    name: "menu-cake";
    categories: string[];
} | {
    name: "menu-cheese";
    categories: string[];
} | {
    name: "menu-grid-o";
    categories: string[];
} | {
    name: "menu-grid-r";
    categories: string[];
} | {
    name: "menu-hotdog";
    categories: string[];
} | {
    name: "menu-left-alt";
    categories: string[];
} | {
    name: "menu-left";
    categories: string[];
} | {
    name: "menu-motion";
    categories: string[];
} | {
    name: "menu-oreos";
    categories: string[];
} | {
    name: "menu-right-alt";
    categories: string[];
} | {
    name: "menu-right";
    categories: string[];
} | {
    name: "menu";
    categories: string[];
} | {
    name: "merge-horizontal";
    categories: string[];
} | {
    name: "merge-vertical";
    categories: string[];
} | {
    name: "mini-player";
    categories: string[];
} | {
    name: "minimize-alt";
    categories: string[];
} | {
    name: "minimize";
    categories: string[];
} | {
    name: "modem";
    categories: string[];
} | {
    name: "moon";
    categories: string[];
} | {
    name: "more-alt";
    categories: string[];
} | {
    name: "more-r";
    categories: string[];
} | {
    name: "more-vertical-alt";
    categories: string[];
} | {
    name: "more-vertical-r";
    categories: string[];
} | {
    name: "more-vertical";
    categories: string[];
} | {
    name: "more";
    categories: string[];
} | {
    name: "mouse";
    categories: string[];
} | {
    name: "move-down";
    categories: string[];
} | {
    name: "move-left";
    categories: string[];
} | {
    name: "move-right";
    categories: string[];
} | {
    name: "move-task";
    categories: string[];
} | {
    name: "move-up";
    categories: string[];
} | {
    name: "music";
    categories: string[];
} | {
    name: "music-note";
    categories: string[];
} | {
    name: "music-speaker";
    categories: string[];
} | {
    name: "nametag";
    categories: string[];
} | {
    name: "notes";
    categories: string[];
} | {
    name: "notifications";
    categories: string[];
} | {
    name: "options";
    categories: string[];
} | {
    name: "organisation";
    categories: string[];
} | {
    name: "pacman";
    categories: string[];
} | {
    name: "password";
    categories: string[];
} | {
    name: "path-back";
    categories: string[];
} | {
    name: "path-crop";
    categories: string[];
} | {
    name: "path-divide";
    categories: string[];
} | {
    name: "path-exclude";
    categories: string[];
} | {
    name: "path-front";
    categories: string[];
} | {
    name: "path-intersect";
    categories: string[];
} | {
    name: "path-outline";
    categories: string[];
} | {
    name: "path-trim";
    categories: string[];
} | {
    name: "path-unite";
    categories: string[];
} | {
    name: "pen";
    categories: string[];
} | {
    name: "pentagon-bottom-left";
    categories: string[];
} | {
    name: "pentagon-bottom-right";
    categories: string[];
} | {
    name: "pentagon-down";
    categories: string[];
} | {
    name: "pentagon-left";
    categories: string[];
} | {
    name: "pentagon-right";
    categories: string[];
} | {
    name: "pentagon-top-left";
    categories: string[];
} | {
    name: "pentagon-top-right";
    categories: string[];
} | {
    name: "pentagon-up";
    categories: string[];
} | {
    name: "performance";
    categories: string[];
} | {
    name: "photoscan";
    categories: string[];
} | {
    name: "piano";
    categories: string[];
} | {
    name: "pill";
    categories: string[];
} | {
    name: "pin-alt";
    categories: string[];
} | {
    name: "pin-bottom";
    categories: string[];
} | {
    name: "pin-top";
    categories: string[];
} | {
    name: "pin";
    categories: string[];
} | {
    name: "play-backwards";
    categories: string[];
} | {
    name: "play-button-o";
    categories: string[];
} | {
    name: "play-button-r";
    categories: string[];
} | {
    name: "play-button";
    categories: string[];
} | {
    name: "play-forwards";
    categories: string[];
} | {
    name: "play-list-add";
    categories: string[];
} | {
    name: "play-list-check";
    categories: string[];
} | {
    name: "play-list-remove";
    categories: string[];
} | {
    name: "play-list-search";
    categories: string[];
} | {
    name: "play-list";
    categories: string[];
} | {
    name: "play-pause-o";
    categories: string[];
} | {
    name: "play-pause-r";
    categories: string[];
} | {
    name: "play-pause";
    categories: string[];
} | {
    name: "play-stop-o";
    categories: string[];
} | {
    name: "play-stop-r";
    categories: string[];
} | {
    name: "play-stop";
    categories: string[];
} | {
    name: "play-track-next-o";
    categories: string[];
} | {
    name: "play-track-next-r";
    categories: string[];
} | {
    name: "play-track-next";
    categories: string[];
} | {
    name: "play-track-prev-o";
    categories: string[];
} | {
    name: "play-track-prev-r";
    categories: string[];
} | {
    name: "play-track-prev";
    categories: string[];
} | {
    name: "plug";
    categories: string[];
} | {
    name: "pokemon";
    categories: string[];
} | {
    name: "polaroid";
    categories: string[];
} | {
    name: "poll";
    categories: string[];
} | {
    name: "presentation";
    categories: string[];
} | {
    name: "printer";
    categories: string[];
} | {
    name: "profile";
    categories: string[];
} | {
    name: "pull-clear";
    categories: string[];
} | {
    name: "push-chevron-down-o";
    categories: string[];
} | {
    name: "push-chevron-down-r";
    categories: string[];
} | {
    name: "push-chevron-down";
    categories: string[];
} | {
    name: "push-chevron-left-o";
    categories: string[];
} | {
    name: "push-chevron-left-r";
    categories: string[];
} | {
    name: "push-chevron-left";
    categories: string[];
} | {
    name: "push-chevron-right-o";
    categories: string[];
} | {
    name: "push-chevron-right-r";
    categories: string[];
} | {
    name: "push-chevron-right";
    categories: string[];
} | {
    name: "push-chevron-up-o";
    categories: string[];
} | {
    name: "push-chevron-up-r";
    categories: string[];
} | {
    name: "push-chevron-up";
    categories: string[];
} | {
    name: "push-down";
    categories: string[];
} | {
    name: "push-left";
    categories: string[];
} | {
    name: "push-right";
    categories: string[];
} | {
    name: "push-up";
    categories: string[];
} | {
    name: "qr";
    categories: string[];
} | {
    name: "quote-o";
    categories: string[];
} | {
    name: "quote";
    categories: string[];
} | {
    name: "radio-check";
    categories: string[];
} | {
    name: "radio-checked";
    categories: string[];
} | {
    name: "ratio";
    categories: string[];
} | {
    name: "read";
    categories: string[];
} | {
    name: "readme";
    categories: string[];
} | {
    name: "redo";
    categories: string[];
} | {
    name: "remote";
    categories: string[];
} | {
    name: "remove-r";
    categories: string[];
} | {
    name: "remove";
    categories: string[];
} | {
    name: "rename";
    categories: string[];
} | {
    name: "reorder";
    categories: string[];
} | {
    name: "repeat";
    categories: string[];
} | {
    name: "ring";
    categories: string[];
} | {
    name: "row-first";
    categories: string[];
} | {
    name: "row-last";
    categories: string[];
} | {
    name: "ruler";
    categories: string[];
} | {
    name: "sand-clock";
    categories: string[];
} | {
    name: "scan";
    categories: string[];
} | {
    name: "screen-mirror";
    categories: string[];
} | {
    name: "screen-shot";
    categories: string[];
} | {
    name: "screen-wide";
    categories: string[];
} | {
    name: "screen";
    categories: string[];
} | {
    name: "scroll-h";
    categories: string[];
} | {
    name: "scroll-v";
    categories: string[];
} | {
    name: "search-found";
    categories: string[];
} | {
    name: "search-loading";
    categories: string[];
} | {
    name: "search";
    categories: string[];
} | {
    name: "select-o";
    categories: string[];
} | {
    name: "select-r";
    categories: string[];
} | {
    name: "select";
    categories: string[];
} | {
    name: "server";
    categories: string[];
} | {
    name: "shape-circle";
    categories: string[];
} | {
    name: "shape-half-circle";
    categories: string[];
} | {
    name: "shape-hexagon";
    categories: string[];
} | {
    name: "shape-rhombus";
    categories: string[];
} | {
    name: "shape-square";
    categories: string[];
} | {
    name: "shape-triangle";
    categories: string[];
} | {
    name: "shape-zigzag";
    categories: string[];
} | {
    name: "share";
    categories: string[];
} | {
    name: "shield";
    categories: string[];
} | {
    name: "shopping-bag";
    categories: string[];
} | {
    name: "shopping-cart";
    categories: string[];
} | {
    name: "shortcut";
    categories: string[];
} | {
    name: "sidebar-open";
    categories: string[];
} | {
    name: "sidebar-right";
    categories: string[];
} | {
    name: "sidebar";
    categories: string[];
} | {
    name: "signal";
    categories: string[];
} | {
    name: "size";
    categories: string[];
} | {
    name: "sketch";
    categories: string[];
} | {
    name: "sleep";
    categories: string[];
} | {
    name: "smart-home-boiler";
    categories: string[];
} | {
    name: "smart-home-cooker";
    categories: string[];
} | {
    name: "smart-home-heat";
    categories: string[];
} | {
    name: "smart-home-light";
    categories: string[];
} | {
    name: "smart-home-refrigerator";
    categories: string[];
} | {
    name: "smart-home-wash-machine";
    categories: string[];
} | {
    name: "smartphone";
    categories: string[];
} | {
    name: "smartphone-chip";
    categories: string[];
} | {
    name: "smartphone-ram";
    categories: string[];
} | {
    name: "smartphone-shake";
    categories: string[];
} | {
    name: "smile-mouth-open";
    categories: string[];
} | {
    name: "smile-neutral";
    categories: string[];
} | {
    name: "smile-no-mouth";
    categories: string[];
} | {
    name: "smile-none";
    categories: string[];
} | {
    name: "smile-sad";
    categories: string[];
} | {
    name: "smile-upside";
    categories: string[];
} | {
    name: "smile";
    categories: string[];
} | {
    name: "software-download";
    categories: string[];
} | {
    name: "software-upload";
    categories: string[];
} | {
    name: "space-between-v";
    categories: string[];
} | {
    name: "space-between";
    categories: string[];
} | {
    name: "spinner-alt";
    categories: string[];
} | {
    name: "spinner-two-alt";
    categories: string[];
} | {
    name: "spinner-two";
    categories: string[];
} | {
    name: "spinner";
    categories: string[];
} | {
    name: "stack";
    categories: string[];
} | {
    name: "stopwatch";
    categories: string[];
} | {
    name: "stories";
    categories: string[];
} | {
    name: "style";
    categories: string[];
} | {
    name: "sun";
    categories: string[];
} | {
    name: "support";
    categories: string[];
} | {
    name: "swap-vertical";
    categories: string[];
} | {
    name: "swap";
    categories: string[];
} | {
    name: "sync";
    categories: string[];
} | {
    name: "tab";
    categories: string[];
} | {
    name: "tap-double";
    categories: string[];
} | {
    name: "tap-single";
    categories: string[];
} | {
    name: "template";
    categories: string[];
} | {
    name: "tennis";
    categories: string[];
} | {
    name: "terminal";
    categories: string[];
} | {
    name: "terrain";
    categories: string[];
} | {
    name: "thermometer";
    categories: string[];
} | {
    name: "thermostat";
    categories: string[];
} | {
    name: "tikcode";
    categories: string[];
} | {
    name: "time";
    categories: string[];
} | {
    name: "timelapse";
    categories: string[];
} | {
    name: "timer";
    categories: string[];
} | {
    name: "today";
    categories: string[];
} | {
    name: "toggle-off";
    categories: string[];
} | {
    name: "toggle-on";
    categories: string[];
} | {
    name: "toggle-square-off";
    categories: string[];
} | {
    name: "toggle-square";
    categories: string[];
} | {
    name: "toolbar-bottom";
    categories: string[];
} | {
    name: "toolbar-left";
    categories: string[];
} | {
    name: "toolbar-right";
    categories: string[];
} | {
    name: "toolbar-top";
    categories: string[];
} | {
    name: "toolbox";
    categories: string[];
} | {
    name: "touchpad";
    categories: string[];
} | {
    name: "track";
    categories: string[];
} | {
    name: "transcript";
    categories: string[];
} | {
    name: "trash-empty";
    categories: string[];
} | {
    name: "trash";
    categories: string[];
} | {
    name: "tree";
    categories: string[];
} | {
    name: "trees";
    categories: string[];
} | {
    name: "trending-down";
    categories: string[];
} | {
    name: "trending";
    categories: string[];
} | {
    name: "tv";
    categories: string[];
} | {
    name: "ui-kit";
    categories: string[];
} | {
    name: "umbrella";
    categories: string[];
} | {
    name: "undo";
    categories: string[];
} | {
    name: "usb";
    categories: string[];
} | {
    name: "usb-c";
    categories: string[];
} | {
    name: "user-add";
    categories: string[];
} | {
    name: "user-list";
    categories: string[];
} | {
    name: "user-remove";
    categories: string[];
} | {
    name: "user";
    categories: string[];
} | {
    name: "view-cols";
    categories: string[];
} | {
    name: "view-comfortable";
    categories: string[];
} | {
    name: "view-day";
    categories: string[];
} | {
    name: "view-grid";
    categories: string[];
} | {
    name: "view-list";
    categories: string[];
} | {
    name: "view-month";
    categories: string[];
} | {
    name: "view-split";
    categories: string[];
} | {
    name: "voicemail-o";
    categories: string[];
} | {
    name: "voicemail-r";
    categories: string[];
} | {
    name: "voicemail";
    categories: string[];
} | {
    name: "website";
    categories: string[];
} | {
    name: "work-alt";
    categories: string[];
} | {
    name: "yinyang";
    categories: string[];
} | {
    name: "zoom-in";
    categories: string[];
} | {
    name: "zoom-out";
    categories: string[];
} | {
    name: "accessibility";
    categories: string[];
} | {
    name: "accessibility-circle";
    categories: string[];
} | {
    name: "accessibility-o";
    categories: string[];
} | {
    name: "airplane";
    categories: string[];
} | {
    name: "airpods";
    categories: string[];
} | {
    name: "angular";
    categories: string[];
} | {
    name: "apple";
    categories: string[];
} | {
    name: "atlassian";
    categories: string[];
} | {
    name: "bamboo";
    categories: string[];
} | {
    name: "bitbucket";
    categories: string[];
} | {
    name: "block-o";
    categories: string[];
} | {
    name: "bullseye";
    categories: string[];
} | {
    name: "bullseye-arrow";
    categories: string[];
} | {
    name: "c-plus-plus";
    categories: string[];
} | {
    name: "camera";
    categories: string[];
} | {
    name: "camera-alt";
    categories: string[];
} | {
    name: "categories";
    categories: string[];
} | {
    name: "check";
    categories: string[];
} | {
    name: "check-circle";
    categories: string[];
} | {
    name: "chevron-double-down";
    categories: string[];
} | {
    name: "chevron-double-left";
    categories: string[];
} | {
    name: "chevron-double-right";
    categories: string[];
} | {
    name: "chevron-double-up";
    categories: string[];
} | {
    name: "circle-ci";
    categories: string[];
} | {
    name: "close-circle";
    categories: string[];
} | {
    name: "code-climate";
    categories: string[];
} | {
    name: "codepen";
    categories: string[];
} | {
    name: "codesandbox";
    categories: string[];
} | {
    name: "cog";
    categories: string[];
} | {
    name: "cross";
    categories: string[];
} | {
    name: "danger-circle";
    categories: string[];
} | {
    name: "danger-o";
    categories: string[];
} | {
    name: "digital-ocean";
    categories: string[];
} | {
    name: "discord";
    categories: string[];
} | {
    name: "dribble";
    categories: string[];
} | {
    name: "dropbox";
    categories: string[];
} | {
    name: "facebook";
    categories: string[];
} | {
    name: "figma";
    categories: string[];
} | {
    name: "flash";
    categories: string[];
} | {
    name: "flash-circle";
    categories: string[];
} | {
    name: "flash-o";
    categories: string[];
} | {
    name: "format-bold";
    categories: string[];
} | {
    name: "framer";
    categories: string[];
} | {
    name: "ghost";
    categories: string[];
} | {
    name: "git";
    categories: string[];
} | {
    name: "github";
    categories: string[];
} | {
    name: "github-actions";
    categories: string[];
} | {
    name: "github-copilot";
    categories: string[];
} | {
    name: "gitlab";
    categories: string[];
} | {
    name: "gitter";
    categories: string[];
} | {
    name: "glass";
    categories: string[];
} | {
    name: "google";
    categories: string[];
} | {
    name: "google-calendar";
    categories: string[];
} | {
    name: "google-drive";
    categories: string[];
} | {
    name: "google-meet";
    categories: string[];
} | {
    name: "headphone";
    categories: string[];
} | {
    name: "heart-filled";
    categories: string[];
} | {
    name: "info-circle";
    categories: string[];
} | {
    name: "info-o";
    categories: string[];
} | {
    name: "instagram";
    categories: string[];
} | {
    name: "invision";
    categories: string[];
} | {
    name: "javascript";
    categories: string[];
} | {
    name: "jenkins";
    categories: string[];
} | {
    name: "jest";
    categories: string[];
} | {
    name: "jsfiddle";
    categories: string[];
} | {
    name: "keyhole-circle";
    categories: string[];
} | {
    name: "keyhole-o";
    categories: string[];
} | {
    name: "kotlin";
    categories: string[];
} | {
    name: "linkedin";
    categories: string[];
} | {
    name: "loadbar";
    categories: string[];
} | {
    name: "loadbar-alt";
    categories: string[];
} | {
    name: "loadbar-doc";
    categories: string[];
} | {
    name: "loadbar-sound";
    categories: string[];
} | {
    name: "loom";
    categories: string[];
} | {
    name: "markdown";
    categories: string[];
} | {
    name: "menu-close";
    categories: string[];
} | {
    name: "menu-open";
    categories: string[];
} | {
    name: "menu-round-circle";
    categories: string[];
} | {
    name: "menu-round-o";
    categories: string[];
} | {
    name: "message";
    categories: string[];
} | {
    name: "message-circle";
    categories: string[];
} | {
    name: "message-o";
    categories: string[];
} | {
    name: "messenger";
    categories: string[];
} | {
    name: "meta";
    categories: string[];
} | {
    name: "mic";
    categories: string[];
} | {
    name: "mic-muted";
    categories: string[];
} | {
    name: "microsoft";
    categories: string[];
} | {
    name: "microsoft-teams";
    categories: string[];
} | {
    name: "microsoft-windows";
    categories: string[];
} | {
    name: "money-sign";
    categories: string[];
} | {
    name: "more-circle";
    categories: string[];
} | {
    name: "more-o";
    categories: string[];
} | {
    name: "more-vertical-circle";
    categories: string[];
} | {
    name: "more-vertical-o";
    categories: string[];
} | {
    name: "next.js";
    categories: string[];
} | {
    name: "node.js";
    categories: string[];
} | {
    name: "npm";
    categories: string[];
} | {
    name: "password-alt";
    categories: string[];
} | {
    name: "patreon";
    categories: string[];
} | {
    name: "paypal";
    categories: string[];
} | {
    name: "phone";
    categories: string[];
} | {
    name: "phone-o";
    categories: string[];
} | {
    name: "plus-circle";
    categories: string[];
} | {
    name: "plus-o";
    categories: string[];
} | {
    name: "plus-r";
    categories: string[];
} | {
    name: "product-hunt";
    categories: string[];
} | {
    name: "python";
    categories: string[];
} | {
    name: "react";
    categories: string[];
} | {
    name: "record-o";
    categories: string[];
} | {
    name: "redux";
    categories: string[];
} | {
    name: "repeat-alt";
    categories: string[];
} | {
    name: "rocket-chat";
    categories: string[];
} | {
    name: "rust";
    categories: string[];
} | {
    name: "send";
    categories: string[];
} | {
    name: "send-alt";
    categories: string[];
} | {
    name: "serverless";
    categories: string[];
} | {
    name: "shuffle";
    categories: string[];
} | {
    name: "side-by-side";
    categories: string[];
} | {
    name: "skype";
    categories: string[];
} | {
    name: "slack";
    categories: string[];
} | {
    name: "sort";
    categories: string[];
} | {
    name: "sort-asc";
    categories: string[];
} | {
    name: "sort-desc";
    categories: string[];
} | {
    name: "spotify";
    categories: string[];
} | {
    name: "square";
    categories: string[];
} | {
    name: "stacked";
    categories: string[];
} | {
    name: "star";
    categories: string[];
} | {
    name: "svelte";
    categories: string[];
} | {
    name: "swift";
    categories: string[];
} | {
    name: "sync-alt";
    categories: string[];
} | {
    name: "tag";
    categories: string[];
} | {
    name: "tags";
    categories: string[];
} | {
    name: "thumbs-down";
    categories: string[];
} | {
    name: "thumbs-up";
    categories: string[];
} | {
    name: "tidal";
    categories: string[];
} | {
    name: "travis-ci";
    categories: string[];
} | {
    name: "trello";
    categories: string[];
} | {
    name: "trophy";
    categories: string[];
} | {
    name: "tumblr";
    categories: string[];
} | {
    name: "twilio";
    categories: string[];
} | {
    name: "twitch";
    categories: string[];
} | {
    name: "twitter";
    categories: string[];
} | {
    name: "typescript";
    categories: string[];
} | {
    name: "unavailable-o";
    categories: string[];
} | {
    name: "unblock-o";
    categories: string[];
} | {
    name: "vector";
    categories: string[];
} | {
    name: "vercel";
    categories: string[];
} | {
    name: "video-camera";
    categories: string[];
} | {
    name: "vimeo";
    categories: string[];
} | {
    name: "vinyl";
    categories: string[];
} | {
    name: "vscode";
    categories: string[];
} | {
    name: "vue";
    categories: string[];
} | {
    name: "volume-low";
    categories: string[];
} | {
    name: "volume-mid";
    categories: string[];
} | {
    name: "volume-high";
    categories: string[];
} | {
    name: "wave";
    categories: string[];
} | {
    name: "webcam";
    categories: string[];
} | {
    name: "webstorm";
    categories: string[];
} | {
    name: "whatsapp";
    categories: string[];
} | {
    name: "wheelchair";
    categories: string[];
} | {
    name: "workplace";
    categories: string[];
} | {
    name: "youtube";
    categories: string[];
} | {
    name: "zoom";
    categories: string[];
})[];
declare const inputTypes: readonly ["color", "date", "email", "file", "hidden", "number", "password", "search", "tel", "text"];
declare const sizes: readonly ["sm", "md", "lg"];
declare const textSizes: readonly ["small", "mid", "regular", "large"];

type Alignment = 'left' | 'center' | 'right';
type BorderItemSide = 'bottom' | 'left' | 'right' | 'top' | 'start' | 'end' | 'all' | Direction;
interface BorderItem {
    color?: string;
    /**
     * @default lighter
     */
    shade?: Shades;
    /**
     * @default all
     */
    side?: BorderItemSide;
    /**
     * @default 1px
     */
    size?: StandardShorthandProperties['borderWidth'] | number;
    /**
     * @default solid
     */
    style?: StandardShorthandProperties['borderStyle'];
    /**
     * @default gray
     */
    variant?: Variants;
}
type ButtonTypes = 'button' | 'submit' | 'reset';
type Direction = 'horizontal' | 'vertical';
interface GetElementPropertyOptions {
    property?: string;
    type: string;
}
type HeadingSizes = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'jumbo';
type Icons = (typeof icons)[number]['name'];
type InputTypes = (typeof inputTypes)[number];
type Placement = 'bottom' | 'left' | 'right' | 'top';
type PositionX = 'left-bottom' | 'left-top' | 'right-bottom' | 'right-top';
type PositionY = 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
type Position = PositionX | PositionY;
type Sizes = (typeof sizes)[number];
type SortDirection = 'asc' | 'desc';
type TextSizes = (typeof textSizes)[number];
interface MediaQueries {
    [key: string]: any;
    _: string;
    lg: string;
    md: string;
    sm: string;
    xl: string;
    xs: string;
}
interface RecursiveChildrenEnhancerOptions {
    componentType?: JSXElementConstructor<any>;
    overrideProps?: boolean;
}
type ResponsiveSizes = '_' | Breakpoints | string;
type ResponsiveInput = {
    [key: ResponsiveSizes]: CSSProperties | SerializedStyles;
};

interface WithAlign {
    /**
     * Text alignment
     */
    align?: Alignment;
}
interface WithBlock {
    /**
     * Use the parent full width
     * @default false
     */
    block?: boolean;
}
interface WithBorder {
    border?: boolean | BorderItemSide | BorderItem | BorderItem[];
}
interface WithBorderless {
    /** @default false */
    borderless?: boolean;
}
interface WithButtonSize {
    /**
     * Button size
     * @default md
     */
    size?: 'xs' | Sizes;
}
interface WithBusy {
    /**
     * Add an animated icon
     * @default false
     */
    busy?: boolean;
}
interface WithChildren {
    /** Required */
    children: ReactNode;
}
interface WithChildrenOptional {
    /** Optional */
    children?: ReactNode;
}
interface WithColor {
    /**
     * Component shade
     * @default mid
     */
    shade?: Shades;
    /** Component color */
    variant?: Variants;
}
interface WithComponentSize {
    /**
     * Component size
     * @default md
     */
    size?: Sizes;
}
interface WithDisplay {
    display?: StandardLonghandProperties['display'];
}
interface WithElementSpacing {
    /** @default false */
    prefixSpacing?: boolean | StringOrNumber;
    /** @default false */
    suffixSpacing?: boolean | StringOrNumber;
}
interface WithFlexBox {
    /**
     * How to align the contents along the cross axis.<br />
     * Any 'align-items' valid CSS value is accepted.
     */
    align?: StandardLonghandProperties['alignItems'];
    /**
     * How to align the contents when there is extra space in the cross axis.
     */
    alignContent?: StandardLonghandProperties['alignContent'];
    /**
     * How children are placed in the flex container.<br />
     * Any 'flex-direction' valid CSS value is accepted.
     */
    direction?: StandardLonghandProperties['flexDirection'];
    /**
     * How to align the contents along the main axis.<br />
     * Any 'justify-content' valid CSS value is accepted.
     */
    justify?: StandardLonghandProperties['justifyContent'];
    /**
     * How to align the contents when there is extra space in the main axis.
     */
    justifyItems?: StandardLonghandProperties['justifyItems'];
    /**
     * Sets whether flex items are forced onto one line or can wrap onto multiple lines.
     */
    wrap?: StandardLonghandProperties['flexWrap'];
}
interface WithFlexItem {
    /**
     * How to align along the cross axis when contained in a Box.
     */
    alignSelf?: StandardLonghandProperties['alignSelf'];
    /**
     * A fixed or relative size along its container's main axis.
     */
    basis?: StandardLonghandProperties['flexBasis'];
    /**
     * Set width and/or height to fill the container.
     */
    fill?: boolean | Direction;
    /**
     * Set flex-grow and/or flex-shrink.
     */
    flex?: boolean | 'grow' | 'shrink' | {
        grow: number;
        shrink: number;
    };
    /**
     * Sets how the item is justified inside its container along the appropriate axis.
     */
    justifySelf?: StandardLonghandProperties['justifySelf'];
    /**
     * Sets the order to lay out an item in a flex container.
     */
    order?: StandardLonghandProperties['order'];
}
interface WithFormElements {
    /** @default false */
    disabled?: boolean;
    name: string;
    /** @default false */
    readOnly?: boolean;
    width?: StringOrNumber;
}
interface WithInline {
    /**
     * Display as an inline element
     * @default false
     */
    inline?: boolean;
}
interface WithInvert {
    /**
     * Invert background
     * @default false
     * */
    invert?: boolean;
}
interface WithLayout extends WithDisplay {
    height?: StandardLonghandProperties['height'] | number;
    maxHeight?: StandardLonghandProperties['maxHeight'] | number;
    maxWidth?: StandardLonghandProperties['maxWidth'] | number;
    minHeight?: StandardLonghandProperties['minHeight'] | number;
    minWidth?: StandardLonghandProperties['minWidth'] | number;
    opacity?: StandardLonghandProperties['opacity'] | number;
    overflow?: StandardShorthandProperties['overflow'];
    pointerEvents?: StandardLonghandProperties['pointerEvents'];
    textAlign?: StandardLonghandProperties['textAlign'];
    transform?: StandardLonghandProperties['transform'];
    transformOrigin?: StandardLonghandProperties['transformOrigin'];
    transition?: StandardShorthandProperties['transition'];
    width?: StandardLonghandProperties['width'] | number;
}
interface WithLight {
    /**
     * Remove bold style
     */
    light?: boolean;
}
interface WithMargin {
    /** Also accepts the shortcuts: mb (margin-bottom), ml, mr, mt, mx (margin horizontal), my (margin vertical) */
    margin?: Spacing | 0;
    /** margin-bottom */
    mb?: Spacing | 0 | 'auto';
    /** margin-left */
    ml?: Spacing | 0 | 'auto';
    /** margin-right */
    mr?: Spacing | 0 | 'auto';
    /** margin-top */
    mt?: Spacing | 0 | 'auto';
    /** margin horizontal axis */
    mx?: Spacing | 0 | 'auto';
    /** margin vertical axis */
    my?: Spacing | 0;
}
interface WithOpen {
    /**
     * Controlled status
     */
    open?: boolean;
}
interface WithPadding {
    /** Also accepts the shortcuts: pb (padding-bottom), pl, pr, pt, px (padding horizontal), py (padding vertical) */
    padding?: Spacing | 0;
    /** padding-bottom */
    pb?: Spacing;
    /** padding-left */
    pl?: Spacing;
    /** padding-right */
    pr?: Spacing;
    /** padding-top */
    pt?: Spacing;
    /** padding horizontal axis */
    px?: Spacing;
    /** padding vertical axis */
    py?: Spacing;
}
interface WithPositioning {
    bottom?: StandardLonghandProperties['bottom'] | number;
    left?: StandardLonghandProperties['left'] | number;
    position?: StandardLonghandProperties['position'];
    right?: StandardLonghandProperties['right'] | number;
    top?: StandardLonghandProperties['top'] | number;
    transform?: StandardLonghandProperties['transform'];
    zIndex?: StandardLonghandProperties['zIndex'] | number;
}
interface WithRadius {
    radius?: Radius | false;
}
interface WithShadow {
    shadow?: Shadow | false;
}
interface WithTextColor {
    color?: string;
    /**
     * Component shade
     * @default mid
     */
    colorShade?: Shades;
    /** Component color */
    colorVariant?: Variants;
}
interface WithTextSize<T = TextSizes> {
    /**
     * Text size
     */
    size?: T;
}
interface WithTextOptions<T extends TextSizes | HeadingSizes = TextSizes> extends WithTextSize<T> {
    /**
     * Bold text
     * @default false
     */
    bold?: boolean;
    /**
     * Italic text
     * @default false
     */
    italic?: boolean;
    letterSpacing?: StandardLonghandProperties['letterSpacing'];
    lineHeight?: StandardLonghandProperties['lineHeight'];
    textDecoration?: StandardShorthandProperties['textDecoration'];
    textTransform?: StandardLonghandProperties['textTransform'];
    wordSpacing?: StandardLonghandProperties['wordSpacing'];
}
interface WithTheme {
    theme?: Partial<Theme>;
}
interface WithTransparent {
    /**
     * Remove background and color
     * @default false
     */
    transparent?: boolean;
}

interface BaseProps {
    [hey: string]: any;
    theme?: Partial<Theme>;
}
interface StyledProps {
    as?: ElementType;
    theme?: Theme;
}
interface CheckboxItem {
    disabled?: boolean;
    label?: ReactNode;
    name: string;
}
type ComponentProps<T, P, E extends string = never> = P & Omit<HTMLProps<T>, 'ref' | 'size' | keyof P | E>;
interface DropdownOption extends Option {
    prefix?: ReactNode;
    suffix?: ReactNode;
    type?: string;
}
type DropdownBaseProps = Omit<Props, 'className' | 'clearComponent' | 'clearOnSelect' | 'contentComponent' | 'create' | 'handleComponent' | 'inputComponent' | 'loadingComponent' | 'menuComponent' | 'menuItemComponent' | 'noDataComponent' | 'onClearAll' | 'onCreate' | 'onSelectAll' | 'optionComponent' | 'options' | 'searchFn' | 'secondaryPlaceholder' | 'separatorComponent' | 'style' | 'styles'>;
interface DropdownProps extends StyledProps, WithBorderless, WithColor, WithMargin, WithOpen, DropdownBaseProps {
    /** @default false */
    allowCreate?: boolean;
    /** @default false */
    closeMultiOnSelect?: boolean;
    /**
     * If set, an input with type hidden will be added to the component with the value of the selected option(s).
     * In case of multiple items, the value will be a string concatenated with "separator".
     */
    inputOptions?: HiddenInput;
    items: Option[];
    large?: boolean;
    /** @default 260 */
    menuMaxHeight?: number;
    onClear?: () => void;
    onCreate?: (item: string, close: () => void) => void;
    onSearch?: (value: string) => void;
    /** @default 260 */
    width?: StringOrNumber;
}
interface ListItem extends WithColor {
    content: ReactNode;
}
interface LoaderProps extends ComponentProps<HTMLDivElement, StyledProps & WithBlock & WithColor> {
    color?: string;
    size?: number;
    /** @default pill */
    type?: 'grow' | 'pill' | 'pride' | 'pulse' | 'rotate';
}
interface RadioItem {
    disabled?: boolean;
    label?: ReactNode;
    value: StringOrNumber;
}
interface SearchItem {
    label?: ReactNode;
    value: string;
}
interface SearchProps extends StyledProps, WithBorderless, WithMargin {
    /** @default 0 */
    debounce?: number;
    height?: StringOrNumber;
    /** @default false */
    hideIcon?: boolean;
    /** @default search */
    icon?: Icons;
    items: SearchItem[];
    loading?: boolean;
    noResultsLabel?: ReactNode;
    onFocus?: (value: string) => void;
    /**
     * Fires after the "debounce" delay
     */
    onSearch?: (value: string) => void;
    onSelect: (value: string) => void;
    /**
     * Fires immediately when the user types
     */
    onType?: (value: string) => void;
    /** @default Search for... */
    placeholder?: string;
    /**
     * Show the options on focus (if available)
     *
     * @default true
     */
    showListOnFocus?: boolean;
    style?: CSSProperties;
    /** @default 100% */
    width?: StringOrNumber;
}

type index_Alignment = Alignment;
type index_BaseProps = BaseProps;
type index_BaseTheme = BaseTheme;
type index_BorderItem = BorderItem;
type index_BorderItemSide = BorderItemSide;
type index_Breakpoints = Breakpoints;
type index_ButtonTypes = ButtonTypes;
type index_CheckboxItem = CheckboxItem;
type index_ColorVariants = ColorVariants;
type index_Colors = Colors;
type index_ComponentProps<T, P, E extends string = never> = ComponentProps<T, P, E>;
type index_Direction = Direction;
type index_DropdownBaseProps = DropdownBaseProps;
type index_DropdownOption = DropdownOption;
type index_DropdownProps = DropdownProps;
type index_GetElementPropertyOptions = GetElementPropertyOptions;
type index_HeadingSizes = HeadingSizes;
type index_Icons = Icons;
type index_InputTypes = InputTypes;
type index_ListItem = ListItem;
type index_LoaderProps = LoaderProps;
type index_MediaQueries = MediaQueries;
type index_Placement = Placement;
type index_Position = Position;
type index_PositionX = PositionX;
type index_PositionY = PositionY;
type index_RadioItem = RadioItem;
type index_Radius = Radius;
type index_RecursiveChildrenEnhancerOptions = RecursiveChildrenEnhancerOptions;
type index_ResponsiveInput = ResponsiveInput;
type index_ResponsiveSizes = ResponsiveSizes;
type index_SearchItem = SearchItem;
type index_SearchProps = SearchProps;
type index_Shades = Shades;
type index_Shadow = Shadow;
type index_Sizes = Sizes;
type index_SortDirection = SortDirection;
type index_Spacing = Spacing;
type index_StyledProps = StyledProps;
type index_TextSizes = TextSizes;
type index_Theme = Theme;
type index_Typography = Typography;
type index_Variants = Variants;
type index_WithAlign = WithAlign;
type index_WithBlock = WithBlock;
type index_WithBorder = WithBorder;
type index_WithBorderless = WithBorderless;
type index_WithBusy = WithBusy;
type index_WithButtonSize = WithButtonSize;
type index_WithChildren = WithChildren;
type index_WithChildrenOptional = WithChildrenOptional;
type index_WithColor = WithColor;
type index_WithComponentSize = WithComponentSize;
type index_WithDisplay = WithDisplay;
type index_WithElementSpacing = WithElementSpacing;
type index_WithFlexBox = WithFlexBox;
type index_WithFlexItem = WithFlexItem;
type index_WithFormElements = WithFormElements;
type index_WithInline = WithInline;
type index_WithInvert = WithInvert;
type index_WithLayout = WithLayout;
type index_WithLight = WithLight;
type index_WithMargin = WithMargin;
type index_WithOpen = WithOpen;
type index_WithPadding = WithPadding;
type index_WithPositioning = WithPositioning;
type index_WithRadius = WithRadius;
type index_WithShadow = WithShadow;
type index_WithTextColor = WithTextColor;
type index_WithTextOptions<T extends TextSizes | HeadingSizes = TextSizes> = WithTextOptions<T>;
type index_WithTextSize<T = TextSizes> = WithTextSize<T>;
type index_WithTheme = WithTheme;
type index_WithTransparent = WithTransparent;
declare namespace index {
  export {
    index_Alignment as Alignment,
    index_BaseProps as BaseProps,
    index_BaseTheme as BaseTheme,
    index_BorderItem as BorderItem,
    index_BorderItemSide as BorderItemSide,
    index_Breakpoints as Breakpoints,
    index_ButtonTypes as ButtonTypes,
    index_CheckboxItem as CheckboxItem,
    index_ColorVariants as ColorVariants,
    index_Colors as Colors,
    index_ComponentProps as ComponentProps,
    index_Direction as Direction,
    index_DropdownBaseProps as DropdownBaseProps,
    index_DropdownOption as DropdownOption,
    index_DropdownProps as DropdownProps,
    index_GetElementPropertyOptions as GetElementPropertyOptions,
    index_HeadingSizes as HeadingSizes,
    index_Icons as Icons,
    index_InputTypes as InputTypes,
    index_ListItem as ListItem,
    index_LoaderProps as LoaderProps,
    index_MediaQueries as MediaQueries,
    index_Placement as Placement,
    index_Position as Position,
    index_PositionX as PositionX,
    index_PositionY as PositionY,
    index_RadioItem as RadioItem,
    index_Radius as Radius,
    index_RecursiveChildrenEnhancerOptions as RecursiveChildrenEnhancerOptions,
    index_ResponsiveInput as ResponsiveInput,
    index_ResponsiveSizes as ResponsiveSizes,
    index_SearchItem as SearchItem,
    index_SearchProps as SearchProps,
    index_Shades as Shades,
    index_Shadow as Shadow,
    index_Sizes as Sizes,
    index_SortDirection as SortDirection,
    index_Spacing as Spacing,
    index_StyledProps as StyledProps,
    index_TextSizes as TextSizes,
    index_Theme as Theme,
    index_Typography as Typography,
    index_Variants as Variants,
    index_WithAlign as WithAlign,
    index_WithBlock as WithBlock,
    index_WithBorder as WithBorder,
    index_WithBorderless as WithBorderless,
    index_WithBusy as WithBusy,
    index_WithButtonSize as WithButtonSize,
    index_WithChildren as WithChildren,
    index_WithChildrenOptional as WithChildrenOptional,
    index_WithColor as WithColor,
    index_WithComponentSize as WithComponentSize,
    index_WithDisplay as WithDisplay,
    index_WithElementSpacing as WithElementSpacing,
    index_WithFlexBox as WithFlexBox,
    index_WithFlexItem as WithFlexItem,
    index_WithFormElements as WithFormElements,
    index_WithInline as WithInline,
    index_WithInvert as WithInvert,
    index_WithLayout as WithLayout,
    index_WithLight as WithLight,
    index_WithMargin as WithMargin,
    index_WithOpen as WithOpen,
    index_WithPadding as WithPadding,
    index_WithPositioning as WithPositioning,
    index_WithRadius as WithRadius,
    index_WithShadow as WithShadow,
    index_WithTextColor as WithTextColor,
    index_WithTextOptions as WithTextOptions,
    index_WithTextSize as WithTextSize,
    index_WithTheme as WithTheme,
    index_WithTransparent as WithTransparent,
  };
}

interface AlertKnownProps extends StyledProps, WithBorder, WithChildren, Pick<WithFlexBox, 'align'>, WithInvert, WithMargin, WithPadding, WithRadius {
    icon?: Icons;
    /** @default success */
    type: 'success' | 'warning' | 'error' | 'info' | 'neutral';
}
declare const Alert: react.ForwardRefExoticComponent<AlertKnownProps & Omit<react.HTMLProps<HTMLDivElement>, "size" | "ref" | keyof AlertKnownProps> & react.RefAttributes<HTMLDivElement>>;

interface AnchorKnownProps extends StyledProps, WithChildren, WithColor, WithDisplay, WithMargin, WithPadding, WithTextOptions {
    external?: boolean;
    hideDecoration?: boolean;
    href: string;
    iconAfter?: Icons;
    iconBefore?: Icons;
    name?: string;
}
declare const Anchor: react.ForwardRefExoticComponent<AnchorKnownProps & Omit<react.HTMLProps<HTMLAnchorElement>, "ref" | keyof AnchorKnownProps> & react.RefAttributes<HTMLAnchorElement>>;

interface AspectRatioKnownProps extends StyledProps, WithChildren, WithMargin {
    maxWidth?: number;
    ratio: number;
}
declare const AspectRatio: react.ForwardRefExoticComponent<AspectRatioKnownProps & Omit<react.HTMLProps<HTMLDivElement>, "size" | "ref" | keyof AspectRatioKnownProps> & react.RefAttributes<HTMLDivElement>>;

interface AvatarProps extends StyledProps, WithBorder, WithColor, WithFlexItem {
    image?: string;
    name: string;
    /** @default md */
    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'jumbo';
    style?: CSSProperties;
}
declare const Avatar: react.ForwardRefExoticComponent<AvatarProps & react.RefAttributes<HTMLDivElement>>;

interface BoxKnownProps extends StyledProps, WithBorder, WithChildrenOptional, WithColor, WithFlexBox, WithFlexItem, WithLayout, WithMargin, WithPadding, WithPositioning, WithRadius, WithShadow, WithTextColor {
    /**
     * Set the display to flex.
     * @default false
     */
    flexBox?: boolean;
}
type BoxProps = ComponentProps<HTMLDivElement, BoxKnownProps>;
/**
 * A container that lays out its contents using "block" (default) or "flex" (with the display prop).
 */
declare const Box: react.ForwardRefExoticComponent<BoxKnownProps & Omit<react.HTMLProps<HTMLDivElement>, "size" | "ref" | keyof BoxKnownProps> & react.RefAttributes<HTMLDivElement>>;
declare const BoxCenter: react.ForwardRefExoticComponent<Omit<BoxProps, "flexBox"> & react.RefAttributes<HTMLDivElement>>;
declare const BoxInline: react.ForwardRefExoticComponent<Omit<BoxProps, "flexBox"> & react.RefAttributes<HTMLDivElement>>;

interface ButtonKnownProps extends StyledProps, WithBlock, WithBusy, WithChildren, WithColor, WithButtonSize, WithInvert, WithLight, WithPadding, WithTransparent {
    /**
     * A shaped button with equal padding on all sides
     */
    shape?: 'circle' | 'round' | 'square';
    /**
     * The button type
     * @default button
     */
    type?: ButtonTypes;
    /**
     * Double the horizontal padding
     * @default false
     */
    wide?: boolean;
}
declare const Button: react.ForwardRefExoticComponent<ButtonKnownProps & Omit<react.HTMLProps<HTMLElement>, "ref" | keyof ButtonKnownProps> & react.RefAttributes<HTMLElement>>;

interface ButtonUnstyledKnownProps extends StyledProps, WithBorder, WithBusy, WithChildren, WithColor, WithDisplay, Pick<WithFlexBox, 'align' | 'justify'>, WithLayout, WithMargin, WithPadding, WithRadius, WithTextOptions {
    type?: ButtonHTMLAttributes<HTMLButtonElement>['type'];
}
declare const ButtonUnstyled: react.ForwardRefExoticComponent<ButtonUnstyledKnownProps & Omit<react.HTMLProps<HTMLButtonElement>, "ref" | keyof ButtonUnstyledKnownProps> & react.RefAttributes<HTMLButtonElement>>;

interface ButtonGroupKnownProps extends StyledProps, WithButtonSize, WithChildren, WithColor {
}
type ButtonGroupProps = ComponentProps<HTMLDivElement, ButtonGroupKnownProps>;
declare function ButtonGroup(props: ButtonGroupProps): react_jsx_runtime.JSX.Element;
declare namespace ButtonGroup {
    var displayName: string;
}

declare function MenuDivider(): react_jsx_runtime.JSX.Element;
declare namespace MenuDivider {
    var displayName: string;
}

interface ChildProps {
    closeMenu?: () => void;
}
interface MenuItemProps extends ChildProps, WithColor {
    children: ((props: Required<ChildProps>) => ReactNode) | ReactNode;
    disabled?: boolean;
    onClick?: MouseEventHandler<HTMLDivElement>;
}
declare function MenuItem({ children, closeMenu, disabled, onClick, ...rest }: MenuItemProps): react_jsx_runtime.JSX.Element;
declare namespace MenuItem {
    var displayName: string;
}

interface MenuKnownProps extends StyledProps, WithChildren, WithColor, WithOpen {
    /** @default An Icon with more-vertical-o */
    component?: ReactElement;
    disabled?: boolean;
    /** @default 200 */
    minWidth?: StringOrNumber;
    onToggle?: (status: boolean) => void;
    /** @default bottom-right */
    position?: Position;
    /** @default click */
    trigger?: 'click' | 'hover';
}
type MenuProps = ComponentProps<HTMLDivElement, MenuKnownProps>;
declare const Menu: react.ForwardRefExoticComponent<MenuKnownProps & Omit<react.HTMLProps<HTMLDivElement>, "size" | "ref" | keyof MenuKnownProps> & react.RefAttributes<HTMLDivElement>>;

interface ButtonSplitProps extends Pick<MenuProps, 'disabled' | 'onToggle'>, WithBlock, WithButtonSize, WithBusy, WithChildren, WithColor, WithInvert {
    dataAttributes?: Record<`data-${string}`, string | number>;
    label: ReactNode;
    onClick: MouseEventHandler<HTMLButtonElement>;
    /** @default bottom-right */
    position?: PositionY;
}
declare function ButtonSplit(props: ButtonSplitProps): react_jsx_runtime.JSX.Element;
declare namespace ButtonSplit {
    var displayName: string;
}

interface SharedProps$1 extends StyledProps, WithComponentSize, WithMargin {
    /** @default center */
    align?: WithFlexBox['align'];
    name: string;
    onChange?: ChangeEventHandler<HTMLInputElement>;
}
type RadioProps = ComponentProps<HTMLInputElement, SharedProps$1 & RadioItem>;

declare const Checkbox: react.ForwardRefExoticComponent<SharedProps$1 & CheckboxItem & Omit<react.HTMLProps<HTMLInputElement>, "size" | "name" | "theme" | "label" | "ref" | "as" | "disabled" | "onChange" | "margin" | "mb" | "ml" | "mr" | "mt" | "mx" | "my" | "align"> & react.RefAttributes<HTMLInputElement>>;

/**
 * Use the RadioGroup component instead of this.
 * RadioGroup accepts an `items` prop that render this component in a group and is responsible for managing state and interactions.
 */
declare const Radio: react.ForwardRefExoticComponent<SharedProps$1 & RadioItem & Omit<react.HTMLProps<HTMLInputElement>, "ref" | keyof SharedProps$1 | keyof RadioItem> & react.RefAttributes<HTMLInputElement>>;

interface ClickOutsideProps extends WithChildren {
    active: boolean;
    display?: ValueOf<typeof DISPLAY>;
    onClick: () => void;
}
declare const DISPLAY: {
    readonly BLOCK: "block";
    readonly FLEX: "flex";
    readonly INLINE: "inline";
    readonly INLINE_BLOCK: "inline-block";
    readonly CONTENTS: "contents";
};
declare function ClickOutside(props: ClickOutsideProps): react_jsx_runtime.JSX.Element;

interface CollapseProps extends WithMargin, WithTextOptions {
    /**
     * The duration of the animation when the content is sliding down in seconds.
     * @default 0.3
     */
    animationEnterDuration?: number;
    /**
     * The duration of the animation when the content is sliding up in seconds.
     * @default 0.3
     */
    animationExitDuration?: number;
    children: ReactNode;
    defaultOpen?: boolean;
    hideToggle?: boolean;
    /**
     * The height you want the content in its collapsed state.
     * @default 0
     */
    initialHeight?: StringOrNumber;
    /**
     * The height you want the content in its expanded state.
     */
    maxHeight?: StringOrNumber;
    onToggle?: (isOpen: boolean) => void;
    open?: boolean;
    title?: ReactNode;
}
declare function Collapse(props: CollapseProps): react_jsx_runtime.JSX.Element;
declare namespace Collapse {
    var displayName: string;
}

interface ComponentWrapperProps extends StyledProps, WithChildren, WithMargin {
    prefix?: Icons | ReactElement;
    /**
     * A single value for both or [width,height]
     * @default 32
     */
    size?: StringOrNumber | [StringOrNumber, StringOrNumber];
    style?: CSSProperties;
    suffix?: Icons | ReactElement;
    /** @default 100% */
    width?: StringOrNumber;
}
declare const ComponentWrapper: react.ForwardRefExoticComponent<ComponentWrapperProps & react.RefAttributes<HTMLDivElement>>;

interface ContainerKnownProps extends StyledProps, WithChildren, WithFlexBox, WithFlexItem, WithLayout, WithMargin, WithPadding {
    /** @default left */
    align?: Alignment | 'stretch';
    fullScreen?: boolean;
    fullScreenOffset?: StringOrNumber;
    /**
     * Update the padding for large screens.
     * @default true
     */
    responsive?: boolean;
    style?: CSSProperties;
    /** @default left */
    textAlign?: Alignment;
    verticalPadding?: boolean;
}
declare const Container: react.ForwardRefExoticComponent<ContainerKnownProps & Omit<react.HTMLProps<HTMLDivElement>, "size" | "ref" | keyof ContainerKnownProps> & react.RefAttributes<HTMLDivElement>>;

interface CopyToClipboardProps extends WithMargin {
    disableAnimation?: boolean;
    /** @default copy */
    icon?: Icons;
    onCopy?: (text: string) => void;
    /** @default 16 */
    size?: number;
    text: string;
    /** @default Copied */
    tooltipCopiedText?: string;
    /** @default Copy */
    tooltipText?: string;
}
declare function CopyToClipboard(props: CopyToClipboardProps): react_jsx_runtime.JSX.Element;
declare namespace CopyToClipboard {
    var displayName: string;
}

interface DataTableColumn<T = string> {
    disableSort?: boolean;
    hideOnResponsive?: boolean;
    isAction?: boolean;
    key: T;
    max?: StringOrNumber;
    min?: StringOrNumber;
    size?: StringOrNumber;
    title: ReactNode;
}
interface DataTableKnownProps<T extends string> extends StyledProps, WithFlexItem, WithLayout, WithMargin {
    /** @default 768 */
    breakpoint?: number;
    /**
     * No background and padding
     * @default false
     */
    clean?: boolean;
    columns: DataTableColumn<T>[];
    data: AnyObject[];
    /**
     * @deprecated Use `defaultSortColumn` instead
     */
    defaultColumn?: string;
    defaultSortColumn?: T;
    defaultSortDirection?: SortDirection;
    disableScroll?: boolean;
    /** @default false */
    loading?: boolean;
    /** @default 10 */
    maxRows?: number;
    noResults?: ReactNode;
    onClickPage?: (page: number, totalPages: number) => void;
    onClickSort?: (sortBy: string, sortDirection: string) => void;
    pagination?: boolean;
    paginationCurrentPage?: number;
    paginationServer?: boolean;
    paginationTotalPages?: number;
    /** @default false */
    responsive?: boolean;
    /** @default 400 */
    scrollDuration?: number;
    scrollElement?: HTMLElement | null;
    scrollMargin?: number;
    style?: CSSProperties;
    /** @default window.innerWidth */
    width?: number;
}
type DataTableProps<T extends string = string> = ComponentProps<HTMLDivElement, DataTableKnownProps<T>, 'data' | 'wrap'>;
declare function DataTable<T extends string = string>(props: DataTableProps<T>): react_jsx_runtime.JSX.Element;
declare namespace DataTable {
    var displayName: string;
}

interface PortalProps extends StyledProps, WithChildren {
    /** @default true */
    closeOnClickOverlay?: boolean;
    /** @default true */
    closeOnEsc?: boolean;
    /** @default false */
    hideOverlay?: boolean;
    /** @default false */
    isActive?: boolean;
    onClose?: () => void;
    onOpen?: () => void;
    /** @default false */
    showCloseButton?: boolean;
    /** @default 1000 */
    zIndex?: number;
}
declare function Portal(props: PortalProps): react.ReactPortal | null;
declare namespace Portal {
    var displayName: string;
}

interface DialogProps extends StyledProps, WithBorder, WithPadding, WithRadius, WithShadow, Omit<PortalProps, 'children' | 'isActive' | 'showCloseButton'> {
    /** @default 'Cancel' */
    buttonCancelText?: string;
    /** @default 'Confirm' */
    buttonConfirmText?: string;
    /** @default ltr */
    buttonOrder?: 'ltr' | 'rtl';
    content: ReactNode;
    isActive: boolean;
    onClickCancel: () => void;
    onClickConfirmation: () => void;
    style?: CSSProperties;
    /** @default left */
    textAlign?: Alignment;
    title: ReactNode;
    /** @default primary */
    variant?: ColorVariants;
    /** @default 380 */
    width?: StringOrNumber;
}
declare function Dialog(props: DialogProps): react_jsx_runtime.JSX.Element;
declare namespace Dialog {
    var displayName: string;
}

type DatePickerRangeParameter = [string | undefined, string | undefined];
type DatePickerClickHandler = (isoString: string | DatePickerRangeParameter) => void;
type DatePickerRangeClickHandler = (isoStrings: DatePickerRangeParameter) => void;
type DatePickerSingleClickHandler = (isoString: string) => void;
type DatePickerOmitProps = 'fromDate' | 'mode' | 'modifiers' | 'month' | 'onMonthChange' | 'onSelect' | 'selected' | 'toDate';
interface DatePickerBaseProps<T extends DatePickerSingleClickHandler | DatePickerRangeClickHandler> extends StyledProps {
    /**
     * @default Go to today
     */
    currentMonthLabel?: ReactNode;
    fromDate?: string | Date;
    onSelect?: T;
    toDate?: string | Date;
    /** @default primary */
    variant?: ColorVariants;
}
interface DatePickerLayoutProps extends WithBorder, WithMargin, WithPadding, WithRadius, WithShadow {
}
type DatePickerProps<T extends DatePickerSingleClickHandler | DatePickerRangeClickHandler, M extends 'single' | 'range'> = DatePickerBaseProps<T> & Omit<M extends 'single' ? DayPickerSingleProps : DayPickerRangeProps, DatePickerOmitProps>;
interface DatePickerSingleProps extends DatePickerProps<DatePickerSingleClickHandler, 'single'>, DatePickerLayoutProps {
}
interface DatePickerRangerProps extends DatePickerProps<DatePickerRangeClickHandler, 'range'>, DatePickerLayoutProps {
    /**
     * @default en-US
     */
    formatLocale?: string;
    /**
     * For internal use with DatePickerInput
     * @private
     * */
    onApply?: (selected: DatePickerRangeParameter) => void;
    /**
     * For internal use with DatePickerInput
     * @private
     * */
    showApply?: boolean;
}
interface DatePickerInputProps extends WithBorderless, WithOpen, DatePickerBaseProps<DatePickerClickHandler> {
    /**  @default en-US */
    formatLocale?: string;
    large?: boolean;
    placeholder?: string;
    /** @default right */
    position?: Alignment;
    separator?: string;
    showRange?: boolean;
    showRangeApply?: boolean;
    width?: StringOrNumber;
}

declare function DatePicker(props: DatePickerSingleProps): react_jsx_runtime.JSX.Element;
declare namespace DatePicker {
    var displayName: string;
}

declare function DatePickerRange(props: DatePickerRangerProps): react_jsx_runtime.JSX.Element;
declare namespace DatePickerRange {
    var displayName: string;
}

declare function DatePickerInput(props: DatePickerInputProps): react_jsx_runtime.JSX.Element;
declare namespace DatePickerInput {
    var displayName: string;
}

interface DividerKnownProps extends StyledProps, WithAlign, WithChildrenOptional, WithColor, WithMargin, WithTextOptions {
    /** @default sm */
    borderSize?: Sizes;
    /** @default solid */
    borderStyle?: 'solid' | 'dashed' | 'dotted';
    /** @default horizontal */
    direction?: Direction;
    /**
     * The distance between the text and borders
     *
     * @default xs
     */
    gap?: Spacing;
    /**
     * The width (for horizontal) or height (for vertical)
     *
     * @default 100%
     */
    length?: StringOrNumber;
    /**
     * The minimum border width for horizontal direction with text
     *
     * @default 50
     */
    minBorderWidth?: StringOrNumber;
}
type DividerProps = ComponentProps<HTMLDivElement, DividerKnownProps>;
declare function Divider(props: DividerProps): react_jsx_runtime.JSX.Element;
declare namespace Divider {
    var displayName: string;
}

declare function Dropdown(props: DropdownProps): react_jsx_runtime.JSX.Element;
declare namespace Dropdown {
    var displayName: string;
}

interface EmojiKnownProps extends StyledProps {
    label?: string;
    size?: number;
    symbol: string;
}
declare const Emoji: react.ForwardRefExoticComponent<EmojiKnownProps & Omit<react.HTMLProps<HTMLSpanElement>, "ref" | keyof EmojiKnownProps> & react.RefAttributes<HTMLSpanElement>>;

interface FormGroupKnownProps extends StyledProps, WithBorder, WithChildren, WithInline, WithLayout, WithMargin, WithPadding, WithRadius {
    assistiveText?: ReactNode;
    error?: ReactNode;
    hideAssistiveText?: boolean;
    label?: ReactNode;
    labelId?: string;
    labelInfo?: ReactNode;
    labelStyles?: CSSProperties;
    required?: boolean;
    skipIcon?: boolean;
    valid?: boolean;
}
type FormGroupProps = ComponentProps<HTMLElement, FormGroupKnownProps>;
declare const FormGroup: react.ForwardRefExoticComponent<FormGroupKnownProps & Omit<react.HTMLProps<HTMLElement>, "size" | "ref" | keyof FormGroupKnownProps> & react.RefAttributes<HTMLDivElement>>;

type FieldTypes = InputTypes | 'checkbox' | 'dropdown' | 'radio' | 'select' | 'toggle' | 'textarea';
type FieldValidations = 'email' | `equalsTo:${string}` | 'password' | 'phoneBR';
interface FieldInputHandlers<T extends HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement> {
    onBlur?: FocusEventHandler<T>;
    onChange?: ChangeEventHandler<T>;
    onFocus?: FocusEventHandler<T>;
}
interface FieldBaseProps extends Pick<FormGroupProps, 'assistiveText' | 'hideAssistiveText' | 'inline' | 'label' | 'required' | 'style'> {
    autoComplete?: string;
    clearError?: () => void;
    debug?: boolean;
    disabled?: boolean;
    id?: string;
    maxLength?: number;
    minLength?: number;
    name: string;
    placeholder?: string;
    readOnly?: boolean;
    setValueAs?: (value: any) => any;
    skipValidation?: boolean;
    type: FieldTypes;
    validations?: FieldValidations[];
    value?: any;
}
interface FieldCheckboxProps extends FieldBaseProps, FieldInputHandlers<HTMLInputElement> {
    children?: never;
    dropdownProps?: never;
    items: CheckboxItem[];
    type: 'checkbox';
}
interface FieldDropdownProps extends FieldBaseProps {
    children?: never;
    dropdownProps?: Omit<DropdownProps, 'disabled' | 'inputOptions' | 'items' | 'onChange' | 'placeholder' | 'width'>;
    items: DropdownOption[];
    onBlur?: never;
    onChange?: (value: DropdownOption[]) => void;
    onFocus?: never;
    type: 'dropdown';
}
interface FieldInputProps extends FieldBaseProps, FieldInputHandlers<HTMLInputElement> {
    children?: never;
    dropdownProps?: never;
    formatter?: 'money' | 'number' | 'phoneBR';
    items?: never;
    type: InputTypes;
}
interface FieldRadioProps extends FieldBaseProps, FieldInputHandlers<HTMLInputElement> {
    children?: never;
    dropdownProps?: never;
    items: RadioItem[];
    type: 'radio';
}
interface FieldSelectProps extends FieldBaseProps, FieldInputHandlers<HTMLSelectElement> {
    children: ReactNode[];
    dropdownProps?: never;
    items?: never;
    type: 'select';
}
interface FieldTextareaProps extends FieldBaseProps, FieldInputHandlers<HTMLTextAreaElement> {
    children?: never;
    dropdownProps?: never;
    items?: never;
    rows?: number;
    type: 'textarea';
}
interface FieldToggleProps extends FieldBaseProps {
    children?: never;
    dropdownProps?: never;
    items?: never;
    onBlur?: never;
    onChange?: (value: boolean) => void;
    onFocus?: never;
    type: 'toggle';
}
type FieldProps = FieldCheckboxProps | FieldDropdownProps | FieldInputProps | FieldRadioProps | FieldSelectProps | FieldTextareaProps | FieldToggleProps;

declare function Field<T extends FieldProps>(props: T): any;
declare namespace Field {
    var displayName: string;
}

interface FormRenderProps<T extends FieldValues = FieldValues> {
    formMethods: UseFormReturn<T>;
}
interface FormProps<T extends FieldValues> extends UseFormProps<T> {
    children: (props: FormRenderProps<T>) => JSX.Element;
}
/**
 A wrapper for the `react-hook-form` FormProvider for use with the **Field** component.

 It will execute the `children` with the `formMethods` from the `useForm` hook as props. You can use it inline or with a functional component.

 ```tsx
 import { Box, Button, Field, Form, FormProps, FormSubmitHandler } from '@gilbarbara/components';

 interface FormData {
   name: string;
 }

 function EditFormFn({ formMethods }: FormProps<FormData>) {
   const { formState: { isDirty }, handleSubmit, } = formMethods;

   const handleFormSubmit: SubmitHandler<FormData> = formData => {
     console.log(formData);
   };

   return (
     <Box as="form" method="POST" onSubmit={handleSubmit(handleFormSubmit)}>
       <Field label="Name" name="name" placeholder="Your name" required type="text" />

       <Button disabled={!isDirty} type="submit">
         Send
       </Button>
     </Box>
   );
 }

 export default function EditForm() {
   return <Form defaultValues={{ name: 'Test User' }}>{EditFormFn}</Form>;
 }
 ```
 */
declare function Form<T extends AnyObject = AnyObject>({ children, ...props }: FormProps<T>): react_jsx_runtime.JSX.Element;
declare namespace Form {
    var displayName: string;
}

interface GridKnownProps extends StyledProps, WithBorder, WithChildren, WithColor, WithFlexItem, WithLayout, WithMargin, WithPadding, WithPositioning, WithRadius, WithShadow {
    alignContent?: StandardLonghandProperties['alignContent'];
    alignItems?: StandardLonghandProperties['alignItems'];
    autoColumns?: StandardLonghandProperties['gridAutoColumns'];
    autoFlow?: StandardLonghandProperties['gridAutoFlow'];
    autoRows?: StandardLonghandProperties['gridAutoRows'];
    columnGap?: StringOrNumber;
    display?: 'grid' | 'inline-grid';
    gap?: StringOrNumber;
    grid?: StandardShorthandProperties['grid'];
    justifyContent?: StandardLonghandProperties['justifyContent'];
    justifyItems?: StandardLonghandProperties['justifyItems'];
    placeContent?: StandardShorthandProperties['placeContent'];
    placeItems?: StandardShorthandProperties['placeItems'];
    rowGap?: StringOrNumber;
    template?: StandardShorthandProperties['gridTemplate'];
    templateAreas?: StandardLonghandProperties['gridTemplateAreas'];
    templateColumns?: StandardLonghandProperties['gridTemplateColumns'];
    templateRows?: StandardLonghandProperties['gridTemplateRows'];
}
type GridProps = ComponentProps<HTMLDivElement, GridKnownProps>;
declare const Grid: react.ForwardRefExoticComponent<GridKnownProps & Omit<react.HTMLProps<HTMLDivElement>, "size" | "ref" | keyof GridKnownProps> & react.RefAttributes<HTMLDivElement>>;

interface HeadingKnownProps extends StyledProps, WithAlign, WithBorder, WithColor, WithChildren, WithLight, WithMargin, Omit<WithTextOptions, 'bold' | 'size'> {
}

declare const H1: react.ForwardRefExoticComponent<HeadingKnownProps & Omit<react.HTMLProps<HTMLHeadingElement>, "size" | "ref" | keyof HeadingKnownProps> & react.RefAttributes<HTMLHeadingElement>>;

declare const H2: react.ForwardRefExoticComponent<HeadingKnownProps & Omit<react.HTMLProps<HTMLHeadingElement>, "size" | "ref" | keyof HeadingKnownProps> & react.RefAttributes<HTMLHeadingElement>>;

declare const H3: react.ForwardRefExoticComponent<HeadingKnownProps & Omit<react.HTMLProps<HTMLHeadingElement>, "size" | "ref" | keyof HeadingKnownProps> & react.RefAttributes<HTMLHeadingElement>>;

declare const H4: react.ForwardRefExoticComponent<HeadingKnownProps & Omit<react.HTMLProps<HTMLHeadingElement>, "size" | "ref" | keyof HeadingKnownProps> & react.RefAttributes<HTMLHeadingElement>>;

declare const H5: react.ForwardRefExoticComponent<HeadingKnownProps & Omit<react.HTMLProps<HTMLHeadingElement>, "size" | "ref" | keyof HeadingKnownProps> & react.RefAttributes<HTMLHeadingElement>>;

declare const H6: react.ForwardRefExoticComponent<HeadingKnownProps & Omit<react.HTMLProps<HTMLHeadingElement>, "size" | "ref" | keyof HeadingKnownProps> & react.RefAttributes<HTMLHeadingElement>>;

declare const Jumbo: react.ForwardRefExoticComponent<HeadingKnownProps & {
    large?: boolean | undefined;
} & Omit<react.HTMLProps<HTMLHeadingElement>, "size" | "large" | "ref" | keyof HeadingKnownProps> & react.RefAttributes<HTMLHeadingElement>>;

interface IconKnownProps extends StyledProps, WithColor, WithMargin {
    color?: string;
    name: Icons;
    /** @default 16 */
    size?: number;
    spin?: boolean;
    style?: CSSProperties;
    title?: ReactNode;
    url: string;
}
type IconProps = RequireExactlyOne<IconKnownProps, 'name' | 'url'>;
declare const Icon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<HTMLSpanElement>>;

interface InputKnownProps extends StyledProps, WithBorderless, WithElementSpacing, WithFormElements {
    /** @default false */
    large?: boolean;
    placeholder?: string;
    /** @default text */
    type?: InputTypes;
}
declare const Input: react.ForwardRefExoticComponent<InputKnownProps & Omit<react.HTMLProps<HTMLInputElement>, "size" | "ref" | keyof InputKnownProps> & react.RefAttributes<HTMLInputElement>>;

interface InputColorKnownProps extends StyledProps, WithFormElements {
    height?: StringOrNumber;
    value?: string;
}
declare const InputColor: react.ForwardRefExoticComponent<InputColorKnownProps & Omit<react.HTMLProps<HTMLInputElement>, "size" | "ref" | "type" | keyof InputColorKnownProps> & react.RefAttributes<HTMLInputElement>>;

interface InputFileKnownProps extends StyledProps, WithFormElements, WithInvert {
    /** @default false */
    large?: boolean;
    value?: string;
}
declare const InputFile: react.ForwardRefExoticComponent<InputFileKnownProps & Omit<react.HTMLProps<HTMLInputElement>, "size" | "ref" | "type" | keyof InputFileKnownProps> & react.RefAttributes<HTMLInputElement>>;

interface LabelKnownProps extends StyledProps, WithChildren, WithInline, WithTextOptions {
    /** For the htmlFor attribute */
    labelId?: string;
    labelInfo?: ReactNode;
}
declare const Label: react.ForwardRefExoticComponent<LabelKnownProps & Omit<react.HTMLProps<HTMLLabelElement>, "ref" | keyof LabelKnownProps> & react.RefAttributes<HTMLLabelElement>>;

interface ListKnownProps extends StyledProps, WithBorder, WithColor, WithFlexItem, WithLayout, WithMargin, WithRadius, WithShadow {
    /** @default vertical */
    direction?: Direction;
    items: (ListItem | ReactNode)[];
    /** @default md */
    size?: 'sm' | 'md' | 'lg';
    /** @default true */
    split?: boolean;
}
declare const List: react.ForwardRefExoticComponent<ListKnownProps & Omit<react.HTMLProps<HTMLUListElement>, "ref" | keyof ListKnownProps> & react.RefAttributes<HTMLUListElement>>;

declare function Loader(props: LoaderProps): react_jsx_runtime.JSX.Element;
declare namespace Loader {
    var displayName: string;
}

interface ModalProps extends StyledProps, WithBorder, WithPadding, WithRadius, WithShadow, Omit<PortalProps, 'isActive' | 'showCloseButton'> {
    hideCloseButton?: boolean;
    isActive: boolean;
    maxHeight?: StandardLonghandProperties['maxHeight'] | number;
    maxWidth?: StandardLonghandProperties['maxWidth'] | number;
    style?: CSSProperties;
    title?: ReactNode;
    width?: StringOrNumber;
}
declare function Modal(props: ModalProps): react_jsx_runtime.JSX.Element;
declare namespace Modal {
    var displayName: string;
}

interface NonIdealStateKnownProps extends StyledProps, WithBorder, WithColor, WithChildrenOptional, WithFlexItem, WithLayout, WithMargin, WithPadding, WithRadius, WithShadow {
    description?: ReactNode;
    /** @default vertical */
    direction?: Direction;
    /** @default false */
    hideIcon?: boolean;
    icon?: Icons;
    /** @default md */
    size?: Sizes;
    title?: ReactNode;
    /** @default not-found */
    type?: 'error' | 'no-results' | 'not-found' | 'offline' | null;
}
type NonIdealStateProps = ComponentProps<HTMLDivElement, NonIdealStateKnownProps, 'wrap'>;
declare function NonIdealState(props: NonIdealStateProps): react_jsx_runtime.JSX.Element;
declare namespace NonIdealState {
    var displayName: string;
}

interface PageKnownProps extends StyledProps, WithColor, Pick<WithFlexBox, 'align' | 'justify'>, WithPadding, WithTextColor {
    /**
     * Override `align` and `justify` to "center"
     *
     * @default false
     */
    centered?: boolean;
    children: ReactNode;
    /** @default false */
    isLoading?: boolean;
    maxWidth?: StringOrNumber;
    /** @default 100vh */
    minHeight?: StringOrNumber;
    /**
     * Set the "data-component-name" property
     *
     * @default Page
     */
    name?: string;
    /**
     * Don't add the default padding
     * @default false
     */
    skipSpacing?: boolean;
    style?: CSSProperties;
    textAlign?: Alignment;
}
type PageProps = ComponentProps<HTMLDivElement, PageKnownProps, 'wrap'>;
declare function Page(props: PageProps): react_jsx_runtime.JSX.Element;
declare namespace Page {
    var displayName: string;
}

interface PaginationProps extends WithBorder, WithMargin, WithPadding {
    /** @default end */
    align?: 'start' | 'center' | 'end';
    currentPage: number;
    /**
     * Hide First/Last links
     * @default false
     */
    disableEdgeNavigation?: boolean;
    /**
     * Limit to show the First/Last buttons
     * @default 3
     */
    edgeNavigationLimit?: number;
    onClick: MouseEventHandler<HTMLButtonElement>;
    style?: CSSProperties;
    totalPages: number;
}
declare function Pagination(props: PaginationProps): react_jsx_runtime.JSX.Element | null;
declare namespace Pagination {
    var displayName: string;
}

interface ParagraphKnownProps extends StyledProps, WithAlign, WithChildren, WithColor, WithMargin, WithTextOptions {
}
declare const Paragraph: react.ForwardRefExoticComponent<ParagraphKnownProps & Omit<react.HTMLProps<HTMLParagraphElement>, "ref" | keyof ParagraphKnownProps> & react.RefAttributes<HTMLParagraphElement>>;

interface ProgressBarKnownProps extends StyledProps, WithColor, WithMargin {
    /** @default light */
    backgroundShade?: Shades;
    /** @default false */
    hideText?: boolean;
    /** @default false */
    large?: boolean;
    step: number;
    steps: number;
    /** @default 100% */
    width?: StringOrNumber;
}
declare const ProgressBar: react.ForwardRefExoticComponent<ProgressBarKnownProps & Omit<react.HTMLProps<HTMLDivElement>, "size" | "ref" | keyof ProgressBarKnownProps> & react.RefAttributes<HTMLDivElement>>;

type TextOptions = WithTextOptions<HeadingSizes | TextSizes>;
interface QuoteKnownProps extends StyledProps, WithChildren, WithColor, TextOptions {
    attribution?: ReactNode;
    /**
     * The distance between the quote and citation
     *
     * @default xs
     */
    attributionGap?: Spacing;
    /**
     * The font size of the citation
     *
     * @default mid
     */
    attributionSize?: TextOptions['size'];
    /**
     * The placement of the border
     *
     * @default left
     */
    border?: Placement;
    /**
     * The size of the border
     *
     * @default sm
     */
    borderSize?: Sizes;
    /**
     * The distance between the border and content
     *
     * @default xs
     */
    gap?: Spacing;
}
declare const Quote: react.ForwardRefExoticComponent<QuoteKnownProps & Omit<react.HTMLProps<HTMLElement>, "ref" | keyof QuoteKnownProps> & react.RefAttributes<HTMLElement>>;

interface RadioGroupProps extends WithComponentSize, Omit<RadioProps, 'align' | 'checked' | 'defaultChecked' | 'label'> {
    defaultValue?: StringOrNumber;
    inline?: boolean;
    items: RadioItem[];
}
declare function RadioGroup(props: RadioGroupProps): react_jsx_runtime.JSX.Element | null;
declare namespace RadioGroup {
    var displayName: string;
}

interface SelectKnownProps extends StyledProps, WithBorderless, WithChildren, Omit<WithElementSpacing, 'suffixSpacing'>, WithFormElements {
    large?: boolean;
}
declare const Select: react.ForwardRefExoticComponent<SelectKnownProps & Omit<react.HTMLProps<HTMLSelectElement>, "size" | "ref" | keyof SelectKnownProps> & react.RefAttributes<HTMLSelectElement>>;

declare function Search(props: SearchProps): react_jsx_runtime.JSX.Element;
declare namespace Search {
    var displayName: string;
}

interface SkeletonKnownProps extends StyledProps, WithChildrenOptional, WithLayout, WithMargin, WithRadius {
    /**
     *
     * The color of the animated gradient
     * @default grayLightest
     */
    accentColor?: string;
    /**
     * The animation delay in seconds
     * @default 0
     */
    animationDelay?: number;
    /**
     * The animation duration in seconds
     * @default 1.2
     */
    animationDuration?: number;
    /**
     * The appear duration in seconds
     * The animation only happens when isLoaded changes to true
     * @default 0.4
     */
    appearDuration?: number;
    /**
     * The color at the animation end
     * @default grayLighter
     */
    baseColor?: string;
    /**
     *  Take the width of its children
     *  @default false
     */
    fitContent?: boolean;
    /**
     * Render the children when isLoaded is true
     */
    isLoaded?: boolean;
}
type SkeletonProps = ComponentProps<HTMLDivElement, SkeletonKnownProps>;
interface SkeletonTextProps extends Omit<SkeletonProps, 'fitContent'> {
    /**
     * The spacing between lines
     * @default xs
     */
    gap?: Spacing;
    /**
     * The height of each line
     * @default 16
     */
    height?: StringOrNumber;
    /**
     * The number of lines to render
     * @default 3
     */
    lines?: number;
}
interface SkeletonCircleProps extends Omit<SkeletonProps, 'fitContent'> {
    size: StringOrNumber;
}

declare const Skeleton: react.ForwardRefExoticComponent<SkeletonKnownProps & Omit<react.HTMLProps<HTMLDivElement>, "size" | "ref" | keyof SkeletonKnownProps> & react.RefAttributes<HTMLDivElement>>;

declare const SkeletonCircle: react.ForwardRefExoticComponent<SkeletonCircleProps & react.RefAttributes<HTMLDivElement>>;

declare const SkeletonText: react.ForwardRefExoticComponent<SkeletonTextProps & react.RefAttributes<HTMLDivElement>>;

interface SpacerKnownProps extends StyledProps, WithBorder, WithChildren, WithFlexItem, WithLayout, WithMargin, WithPadding, WithRadius, WithShadow {
    /**
     * The spacer direction.
     * @default horizontal
     */
    direction?: Direction;
    /**
     * Distribution of the children in the spacer.
     * @default start
     */
    distribution?: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
    /**
     * The horizontal gap between the children.
     * @default sm
     */
    gap?: Spacing;
    /** The vertical gap between the children. */
    gapVertical?: Spacing;
    /**
     * Expand child width (Vertical only)
     * @default false
     */
    grow?: boolean;
    /**
     * The vertical alignment of the children.
     * @default center
     * */
    verticalAlign?: 'center' | 'end' | 'start' | 'stretch';
    /**
     * Wrap the children if they don't fit in the container.
     * @default true
     * */
    wrap?: boolean;
}
/**
 * You can use a "data-flex" property on the children to grow or shrink to fit the space available.
 */
declare const Spacer: react.ForwardRefExoticComponent<SpacerKnownProps & Omit<react.HTMLProps<HTMLDivElement>, "size" | "ref" | keyof SpacerKnownProps> & react.RefAttributes<HTMLDivElement>>;

interface StatusIndicatorKnownProps extends StyledProps, WithColor, WithMargin {
    /** @default lighter */
    centerShade?: Shades;
    ratio?: number;
    size?: number;
}
type StatusIndicatorProps = ComponentProps<HTMLDivElement, StatusIndicatorKnownProps>;
declare function StatusIndicator(props: StatusIndicatorProps): react_jsx_runtime.JSX.Element;
declare namespace StatusIndicator {
    var displayName: string;
}

interface TabProps extends StyledProps, WithChildren, WithColor {
    disabled?: boolean;
    id: string;
    title: ReactNode;
}
declare function Tab(props: TabProps): react_jsx_runtime.JSX.Element;
declare namespace Tab {
    var displayName: string;
}

interface TabsProps extends StyledProps, WithChildren, WithColor, WithMargin {
    defaultId?: string;
    /** @default vertical */
    direction?: Direction;
    /** @default false */
    disableActiveBorderRadius?: boolean;
    id?: string;
    loader?: ReactNode;
    maxHeight?: number | StandardLonghandProperties['maxHeight'];
    minHeight?: number | StandardLonghandProperties['minHeight'];
    noContent?: ReactNode;
    onClick?: (id: string) => void;
    style?: CSSProperties;
}
declare function Tabs(props: TabsProps): react_jsx_runtime.JSX.Element | null;
declare namespace Tabs {
    var displayName: string;
}

interface TagProps extends StyledProps, WithChildren, WithColor, WithMargin, WithTextOptions {
    color?: Variants;
    colorShade?: Shades;
    iconAfter?: Icons;
    iconBefore?: Icons;
    invert?: boolean;
    onClickAfter?: (event: MouseEvent) => void;
    onClickBefore?: (event: MouseEvent) => void;
    style?: CSSProperties;
}
declare const Tag: react.ForwardRefExoticComponent<TagProps & react.RefAttributes<HTMLSpanElement>>;

interface TextKnownProps extends StyledProps, WithChildren, WithColor, WithTextOptions {
}
declare const Text: react.ForwardRefExoticComponent<TextKnownProps & Omit<react.HTMLProps<HTMLSpanElement>, "ref" | keyof TextKnownProps> & react.RefAttributes<HTMLSpanElement>>;

interface TextareaKnownProps extends StyledProps, WithBorderless, WithElementSpacing, WithFormElements {
}
declare const Textarea: react.ForwardRefExoticComponent<TextareaKnownProps & Omit<react.HTMLProps<HTMLTextAreaElement>, "size" | "ref" | keyof TextareaKnownProps> & react.RefAttributes<HTMLTextAreaElement>>;

interface ToggleKnownProps extends StyledProps, WithColor, WithComponentSize {
    /**
     * Initial status (uncontrolled mode)
     * @default false
     */
    /** Status (controlled mode) */
    checked?: boolean;
    defaultChecked?: boolean;
    disabled?: boolean;
    label?: ReactNode;
    labelOptions?: WithTextOptions;
    name?: string;
    /**
     * Callback when the status changes (uncontrolled mode)
     */
    onChange?: (value: boolean) => void;
    /**
     * Callback when clicking the toggle (controlled mode)
     */
    onClick?: (value: boolean) => void;
}
declare const Toggle: react.ForwardRefExoticComponent<ToggleKnownProps & Omit<react.HTMLProps<HTMLDivElement>, "ref" | keyof ToggleKnownProps> & react.RefAttributes<HTMLInputElement>>;

interface SharedProps {
    /** @default middle */
    align: 'start' | 'middle' | 'end';
    /** @default bottom */
    position: Placement;
    /**
     * Optional title for the tooltip.
     */
    title?: string;
    /** Content wrapping */
    wrap?: Sizes;
    /** @default 100 */
    zIndex?: number;
}
interface AnimationProps {
    /**
     * The delay before the tooltip is shown in milliseconds.
     * @default 180
     */
    delay: number;
    /**
     * The duration of the animation in milliseconds.
     * default 260
     */
    duration: number;
    /**
     * The easing function.
     * @default 'ease-in-out'
     */
    easing: string;
}
interface ArrowProps {
    /**
     * The distance between the arrow and the target.
     * @default 4
     */
    arrowDistance: number;
    /** @default 8 */
    arrowLength: number;
    /**
     * The margin for the arrow with start/end alignment.
     * @default 4 */
    arrowMargin: number;
}
interface TooltipProps extends Partial<SharedProps>, Partial<AnimationProps>, Partial<ArrowProps>, WithChildren, WithColor, WithOpen, WithRadius, WithShadow, WithTextOptions {
    /**
     * Optional aria label for the tooltip.
     * @default innerText of the content
     */
    ariaLabel?: string;
    content: ReactNode;
    /**
     * Disable the tooltip.
     * @default false
     */
    disabled?: boolean;
    /**
     * Trigger type.
     * @default hover
     */
    eventType?: 'click' | 'hover';
    style?: CSSProperties;
}
declare function Tooltip(props: TooltipProps): react_jsx_runtime.JSX.Element;
declare namespace Tooltip {
    var displayName: string;
}

interface TruncateProps extends StyledProps, WithChildren {
    /** @default 2 */
    lines?: number;
    maxWidth?: StringOrNumber;
}
declare function Truncate(props: TruncateProps): react_jsx_runtime.JSX.Element;
declare namespace Truncate {
    var displayName: string;
}

declare function animateIcon(target: HTMLElement, color?: Variants, theme?: Theme): void;
declare const fadeIn: _emotion_serialize.Keyframes;
declare const fadeOut: _emotion_serialize.Keyframes;
declare const fadeInOut: _emotion_serialize.Keyframes;
declare const rotate: _emotion_serialize.Keyframes;

declare function mergeTheme(customTheme?: PartialDeep<Theme>): Theme;
/**
 * Helper to generate responsive media queries
 */
declare function responsive(rules: ResponsiveInput): _emotion_utils.SerializedStyles;

interface GetContainerStylesOptions {
    responsive?: boolean;
    verticalPadding?: boolean;
}
declare function getContainerStyles(props: WithTheme, options?: GetContainerStylesOptions): _emotion_utils.SerializedStyles;

export { Alert, Anchor, AspectRatio, Avatar, Box, BoxCenter, BoxInline, BoxKnownProps, BoxProps, Button, ButtonGroup, ButtonSplit, MenuDivider as ButtonSplitDivider, MenuItem as ButtonSplitItem, ButtonUnstyled, Checkbox, ClickOutside, Collapse, ComponentWrapper, Container, CopyToClipboard, DataTable, DataTableColumn, DatePicker, DatePickerInput, DatePickerInputProps, DatePickerRange, DatePickerRangerProps, DatePickerSingleProps, Dialog, Divider, Dropdown, Emoji, Field, Form, FormGroup, FormProps, FormRenderProps, Grid, GridKnownProps, GridProps, H1, H2, H3, H4, H5, H6, Icon, Input, InputColor, InputFile, Jumbo, Label, List, Loader, Menu, MenuDivider, MenuItem, Modal, NonIdealState, Page, Pagination, Paragraph, Portal, ProgressBar, Quote, Radio, RadioGroup, Search, Select, Skeleton, SkeletonCircle, SkeletonText, Spacer, StatusIndicator, Tab, Tabs, Tag, Text, Textarea, Theme, Toggle, Tooltip, Truncate, index as Types, animateIcon, fadeIn, fadeInOut, fadeOut, getContainerStyles, icons, mergeTheme, responsive, rotate, theme };