@kwantis-id3/frontend-library 0.27.1 → 1.0.0-rc.10

package/dist/index.d.ts

@@ -1,48 +1,23 @@
-import * as _emotion_react_types_jsx_namespace from '@emotion/react/types/jsx-namespace';
-import * as React$1 from 'react';
-import React__default from 'react';
-import { Interpolation, CreateStyled as CreateStyled$1, CreateStyledComponent, FilteringStyledOptions, StyledOptions } from '@emotion/styled';
-import { Theme, PropsOf } from '@emotion/react';
+import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
+import { Interpolation, Theme as Theme$1 } from '@emotion/react';
+import { Theme } from '@emotion/react/dist/declarations/src';
+import * as react from 'react';
+import { PropsWithChildren, ReactNode, FC } from 'react';
+import { ColumnDef } from '@tanstack/react-table';
+import { CreateStyled } from '@emotion/styled';
 
-interface Color {
-    main: string;
-    contrastText: string;
-}
-interface ThemeColorsObject {
-    primary: Color;
-    secondary: Color;
-    tertiary: Color;
-    statusOk: Color;
-    statusWarning: Color;
-    statusCritical: Color;
-    statusNeutral: Color;
-}
-interface ThemeContextProps {
-    colors: ThemeColorsObject;
-}
-interface Nothing {
-}
-type Union<T, U> = T | (U & Nothing);
-type ThemeColors = keyof ThemeColorsObject;
-type ThemeColorsExtended = Union<ThemeColors, string>;
-type ThemeProperties = ThemeContextProps & {
-    getColor: (color: ThemeColorsExtended) => Color;
-};
-declare const ThemeContextProvider: (props: React__default.PropsWithChildren<{
-    theme?: ThemeContextProps;
-}>) => React__default.JSX.Element;
-declare const useThemeContext: () => ThemeProperties;
-
-type ButtonVariants = "contained" | "outlined" | "text";
-type ButtonProps = {
+type TButtonVariants = "contained" | "outlined" | "text";
+type TButtonProps = {
     /** Color of the button */
-    color?: ThemeColorsExtended;
+    color?: string;
     /** Type of the button */
     type?: "button" | "submit" | "reset";
     /** Custom styles */
     sx?: Interpolation<Theme>;
     /** Variant of the button, either `contained`, `outlined` or `text` */
-    variant?: ButtonVariants;
+    variant?: TButtonVariants;
+    /** The button size; either "large" or "small" */
+    size?: "small" | "large";
     /** onClick handler */
     onClick?: () => void;
     className?: string;
@@ -51,55 +26,162 @@ type ButtonProps = {
     /** Disabled state */
     disabled?: boolean;
     /** Elements to render as children */
-    children?: React$1.ReactNode;
+    children?: React.ReactNode;
 };
-declare const Button: (props: ButtonProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
-type AccordionProps = {
-    /** Text of the accordion trigger */
+declare const Button: (props: TButtonProps) => _emotion_react_jsx_runtime.JSX.Element;
+
+type TColorScale = {
+    50: string;
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    700: string;
+    800: string;
+    900: string;
+    950: string;
+};
+interface ICommonColors {
+    red: TColorScale;
+    green: TColorScale;
+    blue: TColorScale;
+    yellow: TColorScale;
+    purple: TColorScale;
+    darkBlue: TColorScale;
+    orange: TColorScale;
+    gray: TColorScale;
+}
+interface IBackgroundColors {
+    main: string;
+    radialGradient: string;
+}
+interface ISharedColorProperties {
+    /** Represents the color itself */
+    main: string;
+    /** A slightly different color derived from the main one */
+    variant: string;
+}
+interface IStandardPaletteColor extends ISharedColorProperties {
+    /** The color to be used for text and elements that need to contrast with the main / variant */
+    contrast: string;
+}
+interface ITagColors {
+    default: {
+        main: string;
+        text: string;
+    };
+    warm: {
+        main: string;
+        text: string;
+    };
+    cold: {
+        main: string;
+        text: string;
+    };
+    paper: {
+        main: string;
+        text: string;
+    };
+}
+interface IIndicatorColors {
+    main: string;
+    mainFill: string;
+    success: string;
+    successFill: string;
+    warning: string;
+    warningFill: string;
+    error: string;
+    errorFill: string;
+}
+interface IPalette {
+    /** Application background */
+    background: IBackgroundColors;
+    /** Primary Brand Color */
+    primary: IStandardPaletteColor;
+    /** Color config for actions solved with a success */
+    success: IStandardPaletteColor;
+    /** Color config for actions solved with a warning */
+    warning: IStandardPaletteColor;
+    /** Color config for actions solved with an error */
+    error: IStandardPaletteColor;
+    /** Color config for surfaces*/
+    surface: IStandardPaletteColor;
+    /** Color config for borders */
+    border: ISharedColorProperties;
+    /** Color config for tags */
+    tag: ITagColors;
+    /** Color config for indicators */
+    indicator: IIndicatorColors;
+}
+type TThemeMode = "light" | "dark" | "system";
+interface IThemeContextProps {
+    /** From this prop you can override (even partially) the palettes (dark and light) of the library. */
+    palettes?: {
+        light?: Partial<IPalette>;
+        dark?: Partial<IPalette>;
+    };
+    defaultMode?: TThemeMode;
+}
+interface IThemeContextValue {
+    /** Which mode is currently active */
+    mode: TThemeMode;
+    /** Which mode is currently displayed.
+     * This is useful when the mode is set to "system" and the user has a dark mode preference.
+     */
+    displayedMode: "light" | "dark";
+    /** A collection of common Colors with variants */
+    commonColors: ICommonColors;
+    /** This will contain the palette of the correct color mode. */
+    activePalette: IPalette;
+    /** use this function to change the mode */
+    setMode: (mode: TThemeMode) => void;
+}
+
+declare const defaultLightPalette: IPalette;
+declare const defaultDarkPalette: IPalette;
+declare const ThemeContextProvider: ({ palettes, defaultMode, children, }: PropsWithChildren<IThemeContextProps>) => ReactNode;
+declare const useThemeContext: () => IThemeContextValue;
+
+type TAccordionProps = PropsWithChildren & {
+    /** Title to be used if no custom trigger is passed */
     title: string;
-    /** Content of the accordion */
-    children: React__default.ReactNode;
-    /** Custom trigger component */
-    customTrigger?: React__default.ReactNode;
-    /** Works only if uncontrolled (isOpen props is not present) */
-    defaultOpen?: boolean;
-    /** Color of the accordion */
-    color?: ThemeColorsExtended;
-    /** Color of the icon */
-    iconColor?: ThemeColorsExtended;
-    /** Color of the divider */
-    dividerColor?: ThemeColorsExtended;
-    /** Hide the icon */
-    hideIcon?: boolean;
-    /** Hide the divider */
-    hideDivider?: boolean;
     /** Pass your state value here if the Accordion needs to be Controlled */
     isOpen?: boolean;
-    /** Lazy render the content of the accordion */
-    isLazy?: boolean;
-    /** onClick handler */
+    /** Default open state if the accordion is Uncontrolled */
+    defaultOpen?: boolean;
+    /** Callback function to be called when the Accordion is clicked */
     onClick?: () => void;
-    /** onOpen handler */
+    /** Callback function to be called when the Accordion opens */
     onOpen?: () => void;
-    /** onClose handler */
+    /** Callback function to be called when the Accordion closes */
     onClose?: () => void;
-    /** Custom styles */
-    sx?: Interpolation<Theme>;
+    /** Custom trigger element */
+    trigger?: (isOpen: boolean) => React.ReactNode;
+    /** Variant of the Accordion. Default has everything wrapped in borders, while light just renders the content and the title without setting colors
+     * @default "default"
+     */
+    variant?: "default" | "light";
 };
-declare const Accordion: (props: AccordionProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
-interface TextFieldProps extends React__default.InputHTMLAttributes<HTMLInputElement> {
+declare const Accordion: FC<TAccordionProps>;
+
+declare const InputField: react.ForwardRefExoticComponent<react.InputHTMLAttributes<HTMLInputElement> & {
+    containerClassName?: string;
+    color?: string;
+    sx?: React.CSSProperties;
+} & react.RefAttributes<HTMLInputElement>>;
+
+type TTextFieldProps = React.InputHTMLAttributes<HTMLInputElement> & {
     /** Classname given to the container div */
     containerClassName?: string;
-    /** Disables the input */
-    isDisabled?: boolean;
     /** The color of the input */
-    color?: ThemeColorsExtended;
+    color?: string;
     /** Change the styles of the input field */
-    sx?: React__default.CSSProperties;
-}
-declare const InputField: React__default.ForwardRefExoticComponent<TextFieldProps & React__default.RefAttributes<HTMLInputElement>>;
+    sx?: React.CSSProperties;
+};
 
 interface SingleSelectProps<Option = {
     label: string;
@@ -130,7 +212,7 @@ interface SingleSelectProps<Option = {
     /** Wether the select is loading */
     isLoading?: boolean;
     /** The color of the select */
-    color?: ThemeColorsExtended;
+    color?: string;
     /** The HTML id of the container */
     containerId?: string;
     /** The HTML id of the select */
@@ -144,7 +226,7 @@ interface SingleSelectProps<Option = {
     /** Wether the select is required */
     required?: boolean;
 }
-declare const SingleSelect: <Option>(props: SingleSelectProps<Option>) => React__default.JSX.Element;
+declare const SingleSelect: <Option>(props: SingleSelectProps<Option>) => _emotion_react_jsx_runtime.JSX.Element;
 
 interface MultiSelectProps<Option = {
     label: string;
@@ -175,7 +257,7 @@ interface MultiSelectProps<Option = {
     /** Wether the select is loading */
     isLoading?: boolean;
     /** The color of the select */
-    color?: ThemeColorsExtended;
+    color?: string;
     /** The HTML id of the container */
     containerId?: string;
     /** The HTML id of the select */
@@ -187,9 +269,9 @@ interface MultiSelectProps<Option = {
     /** Wether the select is required */
     required?: boolean;
 }
-declare const MultiSelect: <Option>(props: MultiSelectProps<Option>) => React__default.JSX.Element;
+declare const MultiSelect: <Option>(props: MultiSelectProps<Option>) => _emotion_react_jsx_runtime.JSX.Element;
 
-type SliderProps = {
+type TSliderProps = {
     /** The values of the slider. */
     values: number[];
     /** The minimum value of the slider. */
@@ -201,11 +283,11 @@ type SliderProps = {
     /** The onFinalChange handler of the slider. (called only when the thumb is released) */
     onFinalChange?: (values: number[]) => void;
     /** The color of the slider */
-    color?: ThemeColorsExtended;
+    color?: string;
     /** The color of the section not included in the range */
-    unselectedColor?: ThemeColorsExtended;
+    unselectedColor?: string;
     /** The color of the thumb */
-    thumbColor?: ThemeColorsExtended;
+    thumbColor?: string;
     /** The HTML id of the slider */
     htmlId?: string;
     /** The class name of the slider */
@@ -221,24 +303,26 @@ type SliderProps = {
     /** Wether the thumbs can overlap */
     allowOverlap?: boolean;
 };
-declare const Slider: (props: SliderProps) => React__default.JSX.Element;
+declare const Slider: (props: TSliderProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 /**
  * @property {string} value - The value displayed in the dropdown item
- * @property {ThemeColorsExtended} color - The color of the dropdown item
+ * @property {string} color - The color of the dropdown item
  * @property {string} textColor - The text color of the dropdown item
  * @property {DropdownItem[]} children - The children of the dropdown item
  * @property {() => void} onClick - The onClick handler of the dropdown item
  */
-type DropdownItem = {
+type TDropdownItem = {
     /** The value displayed in the item */
     value: string;
     /** The color of the item */
-    color?: ThemeColorsExtended;
+    bgColor?: string;
     /** The text color of the item */
     textColor?: string;
+    /** The hover color of the item */
+    hoverColor?: string;
     /** The children of the item */
-    children?: DropdownItem[];
+    children?: TDropdownItem[];
     /** Wether the item is hidden or not */
     isHidden?: boolean;
     /** Wether the dropdown should close when the item is clicked */
@@ -246,25 +330,30 @@ type DropdownItem = {
     /** The onClick handler of the item */
     onClick?: () => void;
 };
-type DropdownProps = {
+type TDropdownProps = {
     /** The content of the dropdown */
-    content: DropdownItem[];
+    content: TDropdownItem[];
     /** The trigger element of the dropdown. Clicking on this item will open the dropdown */
-    trigger: React__default.ReactNode;
+    trigger: React.ReactNode;
     /** The color of the dropdown */
-    color?: ThemeColorsExtended;
+    bgColor?: string;
     /** The hover color of the dropdown */
-    hoverColor?: ThemeColorsExtended;
+    hoverColor?: string;
     /** Controls wether the dropdown should extend towards the left or the right */
     direction?: "left" | "right";
     /** The mobile breakpoint, by default it's 768px */
     mobileBreakpoint?: number;
 };
-declare const Dropdown: (props: DropdownProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+type TDropdownItemProps = TDropdownItem & {
+    direction?: string;
+    closeBody: () => void;
+};
+
+declare const Dropdown: (props: TDropdownProps) => _emotion_react_jsx_runtime.JSX.Element;
 
-interface ModalProps {
+type TModalProps = {
     /** The content of the modal */
-    children: React__default.ReactNode;
+    children: React.ReactNode;
     /** Cointrols whether the modal should be open or not. */
     isOpen: boolean;
     /** The handler to be called when the modal is closed */
@@ -276,9 +365,206 @@ interface ModalProps {
     /** custom height */
     height?: string;
     /** custom css */
-    sx?: React__default.CSSProperties;
-}
-declare const Modal: React__default.FC<ModalProps>;
+    sx?: React.CSSProperties;
+};
+
+declare const Modal: FC<TModalProps>;
+
+type TIndicatorInstanceProps = {
+    outerColor?: string;
+    innerColor?: string;
+    size?: number;
+    title?: string;
+    onClick?: (e: React.MouseEvent<SVGSVGElement>) => void;
+};
+type TIndicatorProps = {
+    variant: TIndicatorVariants;
+} & TIndicatorInstanceProps;
+type TIndicatorVariants = "live" | "success" | "warning" | "error";
+
+type TGenericIndicatorProps = {
+    variant: TIndicatorVariants;
+} & TIndicatorProps;
+declare const Indicator: FC<TGenericIndicatorProps>;
+
+type TTagProps = {
+    text: string;
+    /**
+     * If `variant` is set to `custom`, `bgColor` and `textColor` will be used.
+     * Otherwise, the `variant` will be used to determine the colors.
+     *
+     * The variants are the keys of the interface `@see ITagColors`, which by default are:
+     * - `default`
+     * - `warm`
+     * - `cold`
+     * - `paper`
+     */
+    variant: keyof ITagColors | "custom";
+    /** To use this prop, the variant must be set to `custom` */
+    bgColor?: string;
+    /** To use this prop, the variant must be set to `custom` */
+    textColor?: string;
+    sx?: Interpolation<Theme>;
+};
+
+/** @jsxImportSource @emotion/react */
+
+declare const Tag: FC<TTagProps>;
+
+type TCardSectionProps = PropsWithChildren & {
+    sx?: Interpolation<Theme$1>;
+    onClick?: (e: React.MouseEvent<HTMLElement>) => void;
+};
+
+/** @jsxImportSource @emotion/react */
+
+/**
+ * The Card component is a container component that can be used to display content in a structured way.
+ * It has 3 possible sizes: small, medium and large.
+ *
+ */
+declare const Card: FC<TCardSectionProps>;
+declare const CardHeader: FC<TCardSectionProps>;
+declare const CardContent: FC<TCardSectionProps>;
+declare const CardFooter: FC<TCardSectionProps>;
+declare const CardIndicators: FC<TCardSectionProps>;
+declare const CardMediaSection: FC<TCardSectionProps>;
+
+type TCellValues = string | number | boolean | null;
+type TTableProps<Cell extends TCellValues, Row extends TTableRow<Cell>> = {
+    columns: ColumnDef<Row, Cell>[];
+    data: Row[] | undefined;
+};
+type TTableCell<T extends TCellValues> = {
+    value: T;
+    bgColor?: string | null;
+    textColor?: string | null;
+};
+type TTableRow<T extends TCellValues> = {
+    info?: {
+        bgColor?: string | null;
+        textColor?: string | null;
+        [key: string]: string | number | boolean | null | undefined;
+    };
+    cells: {
+        [key: string]: TTableCell<T>;
+    };
+};
+
+declare const Table: <Cell extends TCellValues, Row extends TTableRow<Cell>>(props: TTableProps<Cell, Row>) => _emotion_react_jsx_runtime.JSX.Element;
+declare const renderCell: (value: string | number | boolean | null) => _emotion_react_jsx_runtime.JSX.Element;
+
+type TMultiViewListProps<Cell extends TCellValues, Row extends TTableRow<Cell>> = TTableProps<Cell, Row> & {
+    mode: "table" | "cards";
+    cardComponent: (item: Row) => React.ReactNode;
+};
+
+declare const MultiViewList: <Cell extends TCellValues, Row extends TTableRow<Cell>>(props: TMultiViewListProps<Cell, Row>) => _emotion_react_jsx_runtime.JSX.Element;
+
+/**
+ * A callback to customize how items are rendered
+ * @property isOpen: A boolean indicating if the item is expanded
+ * @property hasChildren: A boolean indicating if the item has children
+ * @property item: the entire item object
+ */
+type TCustomRenderProps = {
+    isOpen: boolean;
+    item: TTreeViewItem;
+};
+/**
+ * A callback to customize how the content of the items is rendered
+ * @extends TCustomRenderProps
+ * @property icon: The icon of the item. If the renderIcon callback is provided, this will be the result of that callback
+ * @property title: The title of the item. If the renderTitle callback is provided, this will be the result of that callback
+ */
+type TRenderTriggerProps = TCustomRenderProps & {
+    icon: React.ReactNode;
+    title: React.ReactNode;
+};
+type TTreeItemFunctions = {
+    /** A callback to customize how the titles are rendered */
+    renderTitle?: (props: TCustomRenderProps) => React.ReactNode;
+    /** A callback to customize how the icons are rendered */
+    renderIcon?: (props: TCustomRenderProps) => React.ReactNode;
+    /** A callback to customize how the content of the items is rendered */
+    renderTrigger?: (props: TRenderTriggerProps) => React.ReactNode;
+    /** A callback executed when an item is focused. An item gets focused when you click on it. Focusing and item will also select it. */
+    onFocusItem?: (item: TTreeViewItem) => void;
+    /** A callback executed when an item is selected. To select an item, ctrl+click on it. */
+    onSelectItems?: (item: string[]) => void;
+    /** A callback executed when an item is expanded */
+    onExpandItem?: (item: TTreeViewItem) => void;
+    /** A callback executed when an item is collapsed */
+    onCollapseItem?: (item: TTreeViewItem) => void;
+    /** A callback to handle the expansion of items without children */
+    onMissingChildren?: (item: TTreeViewItem) => void;
+};
+type TTreeViewProps = TTreeItemFunctions & {
+    /** An array representing the items that the tree needs to render */
+    items: TTreeViewItem[];
+    /** Disable multi-selection possibility */
+    isMultiSelectionDisabled?: boolean;
+    /** Custom styles */
+    sx?: Interpolation<Theme$1>;
+};
+type TUncontrolledTreeViewProps = TTreeViewProps & {
+    items: TTreeViewItem[];
+};
+type TControlledTreeViewProps = TTreeViewProps & {
+    /** The current state of the Tree View. */
+    viewState: TViewState;
+};
+type TViewState = {
+    /** The list of ids of items that are selected */
+    selectedItems?: string[];
+    /** The list of ids of items that are expanded */
+    expandedItems?: string[];
+    /** The focused item */
+    focusedItem?: string;
+};
+type TTreeViewItem = TTreeItemFunctions & {
+    /** Item identifier */
+    id: string;
+    /** Item name */
+    name: string;
+    /** The possible children of this item */
+    children?: string[];
+    /** If the item should be rendered as a folder even with no children */
+    isFolder?: boolean;
+    /** A callback to fetch children asynchronously */
+    childrenAsync?: () => Promise<TTreeViewItem[]>;
+    /** Custom styles */
+    sx?: Interpolation<Theme$1>;
+};
+
+/** @jsxImportSource @emotion/react */
+
+declare const ControlledTreeView: FC<TControlledTreeViewProps>;
+
+declare const UncontrolledTreeView: FC<TUncontrolledTreeViewProps>;
+
+type TDrawerProps = {
+    /** Position of the drawer */
+    anchor: "top" | "right" | "bottom" | "left";
+    /** Trigger showed when drawer is closed */
+    closedTrigger?: ReactNode;
+    /** Trigger showed when drawer is open */
+    openTrigger?: ReactNode;
+    /** Component to be rendered when Drawer is open */
+    openContent?: ReactNode;
+    /** Component to be rendered when Drawer is closed */
+    closedContent?: ReactNode;
+    /** Min open of the drawer as number of pixels. If not defined the minOpen will be the height of closedContent if present, otherwise 0px */
+    minOpen?: number;
+    /** Max open of the drawer as number of pixels. If not defined the maxOpen will be the height of openContent with limit at 90vh/vw */
+    maxOpen?: number;
+    /** Background color */
+    bgColor?: string;
+    /** Trigger hover color */
+    triggerHoverColor?: string;
+};
+
+declare const Drawer: ({ anchor, openContent, closedContent, openTrigger, closedTrigger, minOpen, maxOpen, bgColor, triggerHoverColor, }: TDrawerProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 /**
  * Hook to check if the screen is mobile. The default breakpoint is 768px.
@@ -287,42 +573,46 @@ declare const Modal: React__default.FC<ModalProps>;
  */
 declare const useIsMobile: (mobileBreakpoint?: number) => boolean;
 
-declare const transientOptions: Parameters<CreateStyled$1>[1];
+/**
+ * emotion.js doesn't support transient options out of the box.
+ *
+ * Without them, you will get a warning in the console for every custom prop that you pass to a styled component, since it will be forwarded to the DOM.
+ * This specific opt-in utility copies the styled-component approach; if used, props starting with `$` will not be passed to the DOM.
+ * @see https://github.com/emotion-js/emotion/issues/2193#issuecomment-766173118
+ */
+declare const transientOptions: Parameters<CreateStyled>[1];
 
-type StyledTags = {
-    [Tag in keyof JSX.IntrinsicElements]: CreateStyledComponent<{
-        theme?: ThemeContextProps;
-        as?: React.ElementType;
-    }, JSX.IntrinsicElements[Tag]>;
-};
-interface BaseCreateStyled {
-    <C extends React.ComponentClass<React.ComponentProps<C>>, ForwardedProps extends keyof React.ComponentProps<C> & string = keyof React.ComponentProps<C> & string>(component: C, options: FilteringStyledOptions<React.ComponentProps<C>, ForwardedProps>): CreateStyledComponent<Pick<PropsOf<C>, ForwardedProps> & {
-        theme?: ThemeContextProps;
-    }, {}, {
-        ref?: React.Ref<InstanceType<C>>;
-    }>;
-    <C extends React.ComponentClass<React.ComponentProps<C>>>(component: C, options?: StyledOptions<React.ComponentProps<C>>): CreateStyledComponent<PropsOf<C> & {
-        theme?: ThemeContextProps;
-    }, {}, {
-        ref?: React.Ref<InstanceType<C>>;
-    }>;
-    <C extends React.ComponentType<React.ComponentProps<C>>, ForwardedProps extends keyof React.ComponentProps<C> & string = keyof React.ComponentProps<C> & string>(component: C, options: FilteringStyledOptions<React.ComponentProps<C>, ForwardedProps>): CreateStyledComponent<Pick<PropsOf<C>, ForwardedProps> & {
-        theme?: ThemeContextProps;
-    }>;
-    <C extends React.ComponentType<React.ComponentProps<C>>>(component: C, options?: StyledOptions<React.ComponentProps<C>>): CreateStyledComponent<PropsOf<C> & {
-        theme?: ThemeContextProps;
-    }>;
-    <Tag extends keyof JSX.IntrinsicElements, ForwardedProps extends keyof JSX.IntrinsicElements[Tag] & string = keyof JSX.IntrinsicElements[Tag] & string>(tag: Tag, options: FilteringStyledOptions<JSX.IntrinsicElements[Tag], ForwardedProps>): CreateStyledComponent<{
-        theme?: ThemeContextProps;
-        as?: React.ElementType;
-    }, Pick<JSX.IntrinsicElements[Tag], ForwardedProps>>;
-    <Tag extends keyof JSX.IntrinsicElements>(tag: Tag, options?: StyledOptions<JSX.IntrinsicElements[Tag]>): CreateStyledComponent<{
-        theme?: ThemeContextProps;
-        as?: React.ElementType;
-    }, JSX.IntrinsicElements[Tag]>;
-}
-interface CreateStyled extends BaseCreateStyled, StyledTags {
-}
 declare const styled: CreateStyled;
 
-export { Accordion, AccordionProps, Button, ButtonProps, Dropdown, DropdownItem, DropdownProps, InputField, Modal, MultiSelect, MultiSelectProps, SingleSelect, SingleSelectProps, Slider, SliderProps, ThemeColors, ThemeColorsObject, ThemeContextProps, ThemeContextProvider, ThemeProperties, styled, transientOptions, useIsMobile, useThemeContext };
+/**
+ *
+ * @param color the color to get the contrast color for
+ * @returns the most readable color between black and white
+ */
+declare const getContrastColor: (color: string) => string;
+/**
+ *
+ * @param color a color
+ * @param strength the strength (0-100) to darken the color
+ * @returns the color darkened by the strength
+ */
+declare const darkenColor: (color: string, strength?: number) => string;
+/**
+ *
+ * @param color a color
+ * @param strength the strength (0-100) to lighten the color
+ * @returns the color lightened by the strength
+ */
+declare const lightenColor: (color: string, strength?: number) => string;
+/**
+ * @param color a color
+ * @returns the hover color, based on if the color is dark or light
+ */
+declare const getHoverColor: (color: string) => string;
+/**
+ * @param color a color
+ * @returns the active color, based on if the color is dark or light
+ */
+declare const getActiveColor: (color: string) => string;
+
+export { Accordion, Button, Card, CardContent, CardFooter, CardHeader, CardIndicators, CardMediaSection, ControlledTreeView, Drawer, Dropdown, IBackgroundColors, ICommonColors, IIndicatorColors, IPalette, IStandardPaletteColor, ITagColors, IThemeContextProps, IThemeContextValue, Indicator, InputField, Modal, MultiSelect, MultiSelectProps, MultiViewList, SingleSelect, SingleSelectProps, Slider, TAccordionProps, TButtonProps, TButtonVariants, TCardSectionProps, TCellValues, TColorScale, TControlledTreeViewProps, TCustomRenderProps, TDrawerProps, TDropdownItem, TDropdownItemProps, TDropdownProps, TIndicatorInstanceProps, TIndicatorProps, TIndicatorVariants, TModalProps, TMultiViewListProps, TRenderTriggerProps, TSliderProps, TTableCell, TTableProps, TTableRow, TTagProps, TTextFieldProps, TThemeMode, TTreeViewItem, TUncontrolledTreeViewProps, TViewState, Table, Tag, ThemeContextProvider, UncontrolledTreeView, darkenColor, defaultDarkPalette, defaultLightPalette, getActiveColor, getContrastColor, getHoverColor, lightenColor, renderCell, styled, transientOptions, useIsMobile, useThemeContext };