@commonsku/styles 1.13.6 → 1.14.1

package/dist/index.d.ts

@@ -0,0 +1,2620 @@
+/// <reference types="react" />
+import React$1, { CSSProperties, Component, ReactNode } from 'react';
+import { FlattenInterpolation, ThemedStyledProps, StyledComponent, CSSObject, FlattenSimpleInterpolation, GlobalStyleComponent, DefaultTheme, ThemeProps } from 'styled-components';
+import { DropzoneOptions } from 'react-dropzone';
+import BaseSelect, { Props } from 'react-select';
+export { components, createFilter, mergeStyles } from 'react-select';
+import BaseCreatableSelect, { Props as Props$2 } from 'react-select/creatable';
+export { makeCreatableSelect } from 'react-select/creatable';
+import BaseAsyncSelect, { Props as Props$1 } from 'react-select/async';
+import BaseDatePicker, { ReactDatePickerProps } from 'react-datepicker';
+import { Column, SortingRule } from 'react-table';
+import { ListOnScrollProps } from 'react-window';
+
+declare type SharedStyleTypes = {
+    pr?: boolean | number;
+    pl?: boolean | number;
+    pt?: boolean | number;
+    pb?: boolean | number;
+    px?: boolean | number;
+    py?: boolean | number;
+    mr?: boolean | number;
+    ml?: boolean | number;
+    mt?: boolean | number;
+    mb?: boolean | number;
+    mx?: boolean | number;
+    my?: boolean | number;
+    hidden?: boolean;
+    block?: boolean;
+    inline_block?: boolean;
+    flex?: boolean;
+    inline_flex?: boolean;
+    grid?: boolean;
+    custom?: string;
+    bg?: string;
+    float?: string;
+};
+declare const SharedStyles: FlattenInterpolation<ThemedStyledProps<SharedStyleTypes, any>>;
+declare const SHARED_STYLE_MAPS: {
+    [key: string]: Function;
+};
+declare const Wrapper: StyledComponent<"div", any, SharedStyleTypes, never>;
+
+declare const avatarSizes: {
+    tiny: {
+        size: string;
+        fontSize: string;
+    };
+    small: {
+        size: string;
+        fontSize: string;
+    };
+    medium: {
+        size: string;
+        fontSize: string;
+    };
+    large: {
+        size: string;
+        fontSize: string;
+    };
+    huge: {
+        size: string;
+        fontSize: string;
+    };
+};
+declare type AvatarSize = keyof typeof avatarSizes;
+declare const avatarShapes: {
+    square: string;
+    circle: string;
+};
+declare type AvatarShape = keyof typeof avatarShapes;
+declare const avatarColors: {
+    teal: {
+        backgroundColor: string;
+        textColor: string;
+    };
+    green: {
+        backgroundColor: string;
+        textColor: string;
+    };
+    yellow: {
+        backgroundColor: string;
+        textColor: string;
+    };
+    navy: {
+        backgroundColor: string;
+        textColor: string;
+    };
+    pink: {
+        backgroundColor: string;
+        textColor: string;
+    };
+};
+declare type AvatarColor = keyof typeof avatarColors;
+declare type _AvatarProps = {
+    size: AvatarSize;
+    shape?: AvatarShape;
+    color?: AvatarColor;
+    hasPic?: boolean;
+    initials?: string;
+    icon?: boolean;
+} & React$1.HTMLAttributes<HTMLDivElement> & SharedStyleTypes;
+declare const Avatar: React$1.FC<Omit<_AvatarProps, 'size'> & {
+    pic?: string;
+    size?: AvatarSize;
+    shape?: AvatarShape;
+    color?: AvatarColor;
+    initials?: string;
+    icon?: boolean;
+}>;
+
+declare type BoxProps = React$1.PropsWithChildren<{
+    borderless?: boolean;
+    padded?: boolean;
+    title?: string | React$1.ReactNode;
+    controls?: React$1.ReactNode;
+} & SharedStyleTypes>;
+declare const Box: ({ title, controls, children, ...props }: BoxProps) => JSX.Element;
+//# sourceMappingURL=Box.d.ts.map
+
+declare const Background: StyledComponent<"div", any, {
+    padded?: boolean | undefined;
+    fillWindow?: boolean | undefined;
+} & SharedStyleTypes, never>;
+
+declare const StyledDropArea: StyledComponent<"div", any, {
+    isDragAccept?: boolean | undefined;
+    isDragReject?: boolean | undefined;
+    isDragActive?: boolean | undefined;
+} & SharedStyleTypes, never>;
+declare type DropAreaProps = React$1.PropsWithChildren<{
+    placeholder?: string | React$1.ReactNode;
+} & SharedStyleTypes>;
+declare const DropArea: ({ children, placeholder, ...props }: DropAreaProps) => JSX.Element;
+declare type DropzoneTypes = {
+    placeholder?: string | React$1.ReactNode;
+    showDroppedFiles?: boolean;
+} & DropzoneOptions;
+declare function Dropzoned({ placeholder, accept, showDroppedFiles, ...props }: DropzoneTypes): JSX.Element;
+declare function DropzonedPreviews({ placeholder, accept, onDrop, ...props }: DropzoneTypes): JSX.Element;
+
+declare type TSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+declare type TSizeOffset = 'xsOffset' | 'smOffset' | 'mdOffset' | 'lgOffset' | 'xlOffset';
+declare type TSizeOffsetRight = 'xsOffsetRight' | 'smOffsetRight' | 'mdOffsetRight' | 'lgOffsetRight' | 'xlOffsetRight';
+declare type TSizeStyle = 'xsStyle' | 'smStyle' | 'mdStyle' | 'lgStyle' | 'xlStyle';
+declare type SizerTypes = {
+    collapse?: TSize | Array<TSize>;
+    offset?: number;
+    first?: string;
+    last?: string;
+    padded?: boolean;
+    xs?: string | number | boolean | CSSObject;
+    sm?: string | number | boolean | CSSObject;
+    md?: string | number | boolean | CSSObject;
+    lg?: string | number | boolean | CSSObject;
+    xl?: string | number | boolean | CSSObject;
+    xsOffset?: number;
+    smOffset?: number;
+    mdOffset?: number;
+    lgOffset?: number;
+    xlOffset?: number;
+    xsOffsetRight?: number;
+    smOffsetRight?: number;
+    mdOffsetRight?: number;
+    lgOffsetRight?: number;
+    xlOffsetRight?: number;
+    xsStyle?: string | CSSObject;
+    smStyle?: string | CSSObject;
+    mdStyle?: string | CSSObject;
+    lgStyle?: string | CSSObject;
+    xlStyle?: string | CSSObject;
+    start?: boolean | number;
+    end?: boolean | number;
+    center?: boolean;
+    totalCols?: number;
+};
+declare const SizerCss: FlattenInterpolation<ThemedStyledProps<SizerTypes, any>>;
+declare const SizerWrapper: StyledComponent<"div", any, SizerTypes, never>;
+
+declare const sizes: {
+    tiny: {
+        'font-family': string;
+        'font-size': string;
+        'line-height': string;
+        padding: string;
+        iconOnlyPadding: string;
+        borderRadius: string;
+        iconSize: string;
+    };
+    small: {
+        'font-family': string;
+        'font-size': string;
+        'line-height': string;
+        padding: string;
+        iconOnlyPadding: string;
+        borderRadius: string;
+        iconSize: string;
+    };
+    medium: {
+        'font-family': string;
+        'font-size': string;
+        'line-height': string;
+        padding: string;
+        iconOnlyPadding: string;
+        borderRadius: string;
+        iconSize: string;
+    };
+    large: {
+        'font-family': string;
+        'font-size': string;
+        'line-height': string;
+        padding: string;
+        iconOnlyPadding: string;
+        borderRadius: string;
+        iconSize: string;
+    };
+    huge: {
+        'font-family': string;
+        'font-size': string;
+        'line-height': string;
+        padding: string;
+        iconOnlyPadding: string;
+        borderRadius: string;
+        iconSize: string;
+    };
+};
+declare type TSize$1 = keyof typeof sizes;
+declare type ButtonVariant = 'primary' | 'secondary' | 'cta' | 'error' | 'disabled' | 'text' | 'primary-light';
+declare type ButtonProps = {
+    secondary?: boolean;
+    cta?: boolean;
+    size?: TSize$1;
+    variant?: ButtonVariant;
+} & SharedStyleTypes & SizerTypes;
+declare const Button: StyledComponent<"button", any, {
+    secondary?: boolean | undefined;
+    cta?: boolean | undefined;
+    size?: "tiny" | "small" | "medium" | "large" | "huge" | undefined;
+    variant?: ButtonVariant | undefined;
+} & SharedStyleTypes & SizerTypes, never>;
+declare const ButtonsGroup: StyledComponent<"div", any, SharedStyleTypes & SizerTypes, never>;
+declare type IconFuncProps = {
+    color: string;
+    [key: string]: any;
+};
+declare type TButtonIcon = ((props: IconFuncProps) => React$1.ReactElement);
+declare type IconButtonProps = React$1.PropsWithChildren<ButtonProps & {
+    Icon?: TButtonIcon | React$1.ReactElement<IconFuncProps>;
+    iconProps?: {
+        [key: string]: any;
+    };
+    iconPosition?: 'left' | 'right';
+    style?: React$1.CSSProperties;
+}> & React$1.ButtonHTMLAttributes<HTMLButtonElement>;
+declare function IconButton({ Icon, children, iconPosition, size, iconProps, ...props }: IconButtonProps): JSX.Element;
+
+declare const H1: StyledComponent<"h1", any, {
+    underlined?: boolean | undefined;
+} & SharedStyleTypes, never>;
+declare const H2: StyledComponent<"h2", any, {
+    underlined?: boolean | undefined;
+} & SharedStyleTypes, never>;
+declare const H3: StyledComponent<"h3", any, {
+    underlined?: boolean | undefined;
+} & SharedStyleTypes, never>;
+declare const H4: StyledComponent<"h4", any, {
+    underlined?: boolean | undefined;
+} & SharedStyleTypes, never>;
+declare const H5: StyledComponent<"h5", any, {
+    underlined?: boolean | undefined;
+} & SharedStyleTypes, never>;
+declare const H6: StyledComponent<"h6", any, {
+    underlined?: boolean | undefined;
+} & SharedStyleTypes, never>;
+//# sourceMappingURL=Headings.d.ts.map
+
+declare type CommonInputProp = {
+    noMargin?: boolean;
+    error?: boolean;
+};
+declare type BaseInputProps = CommonInputProp & {
+    hasIcon?: boolean;
+} & SharedStyleTypes;
+declare type InputProps = BaseInputProps & React$1.InputHTMLAttributes<HTMLInputElement>;
+declare const InputIconLabel: StyledComponent<"div", any, CommonInputProp & {
+    isActive?: boolean | undefined;
+    isDisabled?: boolean | undefined;
+    isHover?: boolean | undefined;
+    iconPosition?: "left" | "right" | undefined;
+}, never>;
+declare const InputIconLabelContainer: StyledComponent<"div", any, {}, never>;
+declare const Input: StyledComponent<"input", any, CommonInputProp & {
+    hasIcon?: boolean | undefined;
+} & SharedStyleTypes, never>;
+declare const LabeledInput: React$1.ForwardRefExoticComponent<React$1.InputHTMLAttributes<HTMLInputElement> & CommonInputProp & {
+    hasIcon?: boolean | undefined;
+} & SharedStyleTypes & {
+    label: string;
+    name?: string | undefined;
+    labelOnTop?: boolean | undefined;
+} & React$1.RefAttributes<HTMLInputElement>>;
+declare const LabeledIconInput: React$1.ForwardRefExoticComponent<React$1.InputHTMLAttributes<HTMLInputElement> & CommonInputProp & {
+    hasIcon?: boolean | undefined;
+} & SharedStyleTypes & {
+    label?: string | undefined;
+    name?: string | undefined;
+    labelOnTop?: boolean | undefined;
+    Icon: React$1.ReactElement;
+    iconPosition?: "left" | "right" | undefined;
+} & React$1.RefAttributes<HTMLInputElement>>;
+declare const RadioLabel: StyledComponent<"label", any, {
+    disabled?: boolean | undefined;
+}, never>;
+declare type BaseRadioProps = {
+    isHovering?: boolean;
+};
+declare type RadioProps = React$1.InputHTMLAttributes<HTMLInputElement> & BaseRadioProps;
+declare const Radio: StyledComponent<"input", any, BaseRadioProps, never>;
+declare const CheckMark: StyledComponent<"span", any, {
+    checked?: boolean | undefined;
+    isHovering?: boolean | undefined;
+    disabled?: boolean | undefined;
+} & SharedStyleTypes, never>;
+declare const Dot: StyledComponent<"span", any, {
+    checked?: boolean | undefined;
+    isHovering?: boolean | undefined;
+    disabled?: boolean | undefined;
+} & SharedStyleTypes, never>;
+declare const LabeledRadio: React$1.FC<RadioProps & {
+    label: string;
+}>;
+declare const LabeledRadioGroup: React$1.FC<RadioProps & {
+    name: string;
+    radios: [{
+        label: string;
+        value: any;
+    }];
+}>;
+declare type LabeledCheckboxProps = {
+    checked?: boolean;
+    disabled?: boolean;
+    label: string | React$1.ReactNode;
+    name?: string;
+    checkboxStyle?: CSSProperties;
+    labelStyle?: CSSProperties;
+    checkboxPosition?: string;
+    hoverByLabel?: boolean;
+    stopPropagation?: boolean;
+    [key: string]: any;
+} & React$1.InputHTMLAttributes<HTMLInputElement>;
+declare const LabeledCheckbox: React$1.ForwardRefExoticComponent<LabeledCheckboxProps>;
+
+declare const Label: StyledComponent<"label", any, {
+    error?: boolean | undefined;
+} & SharedStyleTypes, never>;
+//# sourceMappingURL=Label.d.ts.map
+
+declare const Padding: StyledComponent<"div", any, SharedStyleTypes, never>;
+//# sourceMappingURL=Padding.d.ts.map
+
+declare function Page(props: React$1.PropsWithChildren<SharedStyleTypes>): JSX.Element;
+//# sourceMappingURL=Page.d.ts.map
+
+declare type ProgressBarProps = React$1.PropsWithChildren<{
+    value: number;
+    max: number;
+    error?: string;
+} & SharedStyleTypes>;
+declare const Progress: (props: ProgressBarProps) => JSX.Element;
+declare const LabeledProgress: (props: ProgressBarProps) => JSX.Element;
+//# sourceMappingURL=Progress.d.ts.map
+
+declare type AdditionalSKUSelectProps = {
+    noMargin?: boolean;
+    error?: boolean;
+    menuRelative?: boolean;
+    inPopup?: boolean;
+};
+declare type GenericObject = {
+    [key: string]: any;
+};
+declare type SKUSelectProps = AdditionalSKUSelectProps & Props;
+declare type SKUAsyncSelectProps = AdditionalSKUSelectProps & Props$1<GenericObject>;
+declare type SKUCreatableSelectProps = AdditionalSKUSelectProps & Props$2<GenericObject>;
+declare const SKUSelect: React$1.ForwardRefExoticComponent<SKUSelectProps & React$1.RefAttributes<BaseSelect>>;
+declare type LabeledSelectProp = SKUSelectProps & {
+    parentStyle?: React$1.CSSProperties;
+};
+declare type TLabeledSelect = React$1.ForwardRefExoticComponent<LabeledSelectProp & React$1.RefAttributes<BaseSelect>>;
+declare const LabeledSelect: TLabeledSelect;
+declare type TSKUCreatableSelect = React$1.ForwardRefExoticComponent<SKUCreatableSelectProps & React$1.RefAttributes<BaseCreatableSelect<GenericObject>>>;
+declare const SKUCreatableSelect: TSKUCreatableSelect;
+declare type LabeledCreatableSelectProps = SKUCreatableSelectProps & {
+    parentStyle?: React$1.CSSProperties;
+};
+declare type TLabeledCreatableSelect = React$1.ForwardRefExoticComponent<LabeledCreatableSelectProps & React$1.RefAttributes<BaseCreatableSelect<GenericObject>>>;
+declare const LabeledCreatableSelect: TLabeledCreatableSelect;
+declare type TSKUAsyncSelect = React$1.ForwardRefExoticComponent<SKUAsyncSelectProps & React$1.RefAttributes<BaseAsyncSelect<GenericObject>>>;
+declare const SKUAsyncSelect: TSKUAsyncSelect;
+declare type LabeledAsyncSelectProps = SKUAsyncSelectProps & {
+    parentStyle?: React$1.CSSProperties;
+};
+declare type TLabeledAsyncSelect = React$1.ForwardRefExoticComponent<LabeledAsyncSelectProps & React$1.RefAttributes<BaseAsyncSelect<GenericObject>>>;
+declare const LabeledAsyncSelect: TLabeledAsyncSelect;
+//# sourceMappingURL=Select.d.ts.map
+
+declare type SidePanelType = {
+    animationDuration?: number;
+    visible?: boolean;
+    from?: "left" | "right" | "bottom" | "top";
+    height?: number;
+    width?: number;
+};
+declare const StyledPanel: StyledComponent<"div", any, SidePanelType, never>;
+declare const SidePanel: ({ from, visible, animationDuration, fullWidthTitle, bodyScrollable, backdrop, controls, header, title, children, ...props }: React$1.PropsWithChildren<{
+    header?: React$1.ReactNode;
+    title: string;
+    controls: React$1.ReactNode;
+    fullWidthTitle?: boolean | undefined;
+    backdrop?: boolean | undefined;
+    bodyScrollable?: boolean | undefined;
+} & SidePanelType & SharedStyleTypes & SizerTypes>) => JSX.Element;
+declare const PanelContact: ({ avatar, name, position, email, ...props }: {
+    name: string;
+    position?: string | undefined;
+    email?: string | undefined;
+    phone?: string | undefined;
+    avatar?: React$1.ReactNode;
+} & SizerTypes) => JSX.Element;
+declare type PhoneType = {
+    phone_number?: string;
+    phone_type?: string;
+    phone_extension?: string;
+};
+declare const PanelTileContact: ({ avatar, name, position, email, phones, ...props }: {
+    name: string;
+    position?: string | undefined;
+    email?: string | undefined;
+    phones?: PhoneType[] | undefined;
+    avatar?: React$1.ReactNode;
+} & SizerTypes) => JSX.Element;
+
+declare const Table: StyledComponent<"table", any, {
+    cellPadding: 0;
+    cellSpacing: 0;
+} & SharedStyleTypes, "cellPadding" | "cellSpacing">;
+declare const TH: StyledComponent<"th", any, {
+    clickable?: boolean | undefined;
+    sticky?: boolean | undefined;
+    stickyTop?: number | undefined;
+} & SharedStyleTypes & SizerTypes, never>;
+declare const TD: StyledComponent<"td", any, {
+    clickable?: boolean | undefined;
+} & SharedStyleTypes & SizerTypes, never>;
+declare const TR: StyledComponent<"tr", any, SizerTypes & {
+    selected?: boolean | undefined;
+}, never>;
+declare const THead: StyledComponent<"thead", any, SizerTypes, never>;
+declare const TBody: StyledComponent<"tbody", any, SizerTypes, never>;
+declare const ResponsiveTable: ({ parentProps, children, ...props }: React$1.PropsWithChildren<{
+    parentProps?: {
+        [key: string]: any;
+        style?: object | undefined;
+    } | undefined;
+} & SharedStyleTypes>) => JSX.Element;
+declare const THSorted: ({ children, order, iconHeight, iconStyles, hideIconOnMobile, ...props }: React$1.PropsWithChildren<{
+    order?: string | undefined;
+    iconHeight?: number | undefined;
+    iconStyles?: object | undefined;
+    hideIconOnMobile?: boolean | undefined;
+}>) => JSX.Element;
+//# sourceMappingURL=Table.d.ts.map
+
+declare const tabSizes: {
+    small: FlattenSimpleInterpolation;
+    medium: FlattenSimpleInterpolation;
+};
+declare const TabBar: StyledComponent<"ul", any, {
+    padded?: boolean | undefined;
+} & SharedStyleTypes, never>;
+declare const Tab: StyledComponent<"li", any, {
+    selected?: boolean | undefined;
+    size?: "small" | "medium" | undefined;
+} & SharedStyleTypes, never>;
+declare type TTab = {
+    label: string;
+    content: React$1.ReactNode;
+    onClick?: Function | VoidFunction;
+};
+declare type TabsProps = {
+    tabs: TTab[];
+    selectedTabIndex?: number;
+    padded?: boolean;
+    size?: keyof typeof tabSizes;
+};
+declare type TabsState = {
+    selectedTabIndex: number;
+};
+declare class Tabs extends Component<TabsProps, TabsState> {
+    constructor(props: TabsProps);
+    getTab(tabs: TTab[], tabIndex?: number): null | TTab;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: Readonly<TabsProps>, prevState: Readonly<TabsState>): void;
+    render(): JSX.Element;
+}
+
+declare const ToggleLink: StyledComponent<"a", any, {
+    selected?: boolean | undefined;
+    stretch?: boolean | undefined;
+} & SharedStyleTypes, never>;
+declare type ToggleProps = React$1.PropsWithChildren<{
+    stretch?: boolean;
+    onClick?: React$1.MouseEventHandler<HTMLDivElement>;
+} & SharedStyleTypes>;
+declare const Toggle: (props: ToggleProps) => JSX.Element;
+//# sourceMappingURL=Toggle.d.ts.map
+
+declare type BaseTextareaProps = {
+    noMargin?: boolean;
+    error?: boolean;
+    hasIcon?: boolean;
+} & SharedStyleTypes;
+declare const Textarea: StyledComponent<"textarea", any, {
+    noMargin?: boolean | undefined;
+    error?: boolean | undefined;
+    hasIcon?: boolean | undefined;
+} & SharedStyleTypes, never>;
+declare type TextareaProps = React$1.TextareaHTMLAttributes<HTMLTextAreaElement> & BaseTextareaProps & {
+    label: string;
+    name?: string;
+    noMargin?: boolean;
+} & SharedStyleTypes;
+declare const LabeledTextarea: React$1.FC<TextareaProps>;
+
+declare const Spinner: (props: React$1.PropsWithChildren<{
+    small?: boolean;
+} & SharedStyleTypes>) => JSX.Element;
+
+declare const Product: (props: {
+    sku: string;
+    picture: string;
+    supplier: string;
+    name: string;
+    price?: number;
+    currency?: string;
+    rating?: number;
+} & SharedStyleTypes) => JSX.Element;
+
+declare type ArtworkProps = {
+    picture?: string;
+    icon?: string;
+    name: string;
+    cssHeight?: number;
+    date?: string;
+    edit?: boolean;
+    noTruncate?: boolean;
+    onClick?: React$1.MouseEventHandler<HTMLDivElement>;
+    onEdit?: Function | VoidFunction;
+    onDelete?: Function | VoidFunction;
+    onSave?: Function | VoidFunction;
+    onDownload?: Function | VoidFunction;
+    inputProps?: InputProps;
+    inputEl?: React$1.ReactNode;
+};
+declare const Artwork: ({ inputProps, ...props }: ArtworkProps & SharedStyleTypes) => JSX.Element;
+
+declare const StarRating: (props: {
+    rating: number;
+} & SharedStyleTypes) => JSX.Element;
+
+declare const Grid: StyledComponent<"div", any, SharedStyleTypes, never>;
+declare type RowPropTypes = {
+    justify?: string;
+    wrap?: string;
+    align?: string;
+    padded?: boolean;
+    start?: boolean;
+    end?: boolean;
+    middle?: boolean;
+} & SharedStyleTypes;
+declare const Row: StyledComponent<"div", any, {
+    justify?: string | undefined;
+    wrap?: string | undefined;
+    align?: string | undefined;
+    padded?: boolean | undefined;
+    start?: boolean | undefined;
+    end?: boolean | undefined;
+    middle?: boolean | undefined;
+} & SharedStyleTypes, never>;
+declare type ColPropTypes = SizerTypes & SharedStyleTypes;
+declare const Col: StyledComponent<"div", any, SizerTypes & SharedStyleTypes, never>;
+
+declare const Overlay: StyledComponent<"div", any, {}, never>;
+declare const PopupHeader: StyledComponent<"div", any, SharedStyleTypes & SizerTypes, never>;
+declare type PopupProps = React$1.PropsWithChildren<{
+    header?: React$1.Component;
+    title?: string | React$1.Component;
+    controls?: Array<React$1.ReactNode>;
+    onClose?: (event?: React$1.MouseEvent) => void;
+    closeOnClickOutside?: boolean;
+    closeOnEsc?: boolean;
+} & SharedStyleTypes> & React$1.HTMLAttributes<HTMLDivElement>;
+declare const Popup: ({ header, title, controls, children, onClose, closeOnEsc, closeOnClickOutside, ...props }: PopupProps) => JSX.Element;
+declare const ShowPopup: React$1.FC<Omit<PopupProps, 'onClose'> & {
+    popup: React$1.ComponentType<PopupProps>;
+    autoOpen?: boolean;
+    render?: React$1.FC<{
+        onClick: () => void;
+    }>;
+}>;
+
+declare const TaskLabel: StyledComponent<"div", any, {
+    hasCheckbox?: boolean | undefined;
+}, never>;
+declare const TaskName: StyledComponent<"div", any, {}, never>;
+declare const StyledTask: StyledComponent<"div", any, SharedStyleTypes, never>;
+declare const TaskBody: StyledComponent<"div", any, {}, never>;
+declare type TaskProps = {
+    taskName: string;
+    date?: string;
+    done?: boolean;
+    assignee?: string;
+    taskBody: string | React$1.ReactNode;
+    checked?: boolean;
+    initialChecked?: boolean;
+    onClickCheckbox?: (checked?: boolean) => any;
+};
+declare const Task: ({ taskName, date, done, assignee, taskBody, initialChecked, onClickCheckbox, ...props }: React$1.PropsWithChildren<TaskProps & SharedStyleTypes>) => JSX.Element;
+declare const StyledCalendarTaskBody: StyledComponent<"span", any, {}, never>;
+declare type CalendarTaskProps = {
+    id?: string;
+    title: string;
+    description: string | React$1.ReactNode;
+    date?: Date;
+    completed?: boolean;
+    colorType?: string;
+    assignee?: string;
+    checked?: boolean;
+    overdue?: boolean;
+    order?: number;
+    onClickCheckbox?: (checked: boolean) => any;
+    isDescriptionHtml?: boolean;
+    draggable?: boolean;
+    hideCheckbox?: boolean;
+    Icon?: React$1.ReactNode;
+};
+declare const CalendarTask: React$1.ForwardRefExoticComponent<CalendarTaskProps & SharedStyleTypes & React$1.InputHTMLAttributes<HTMLInputElement> & React$1.RefAttributes<HTMLInputElement>>;
+
+declare type AdditionalStyles = CSSObject | string | ((p: ThemeProps<DefaultTheme>) => CSSObject | string | undefined | null);
+declare const GlobalStyle: GlobalStyleComponent<{
+    additionalStyles?: AdditionalStyles | undefined;
+}, DefaultTheme>;
+
+declare const colors: {
+    primary1: {
+        '10': string;
+        '20': string;
+        '30': string;
+        '40': string;
+        '50': string;
+        '60': string;
+        '65': string;
+        '70': string;
+        '75': string;
+        '80': string;
+        '85': string;
+        '90': string;
+        main: string;
+        'main-hover': string;
+        light: string;
+        lightest: string;
+        dark: string;
+        'dark-hover': string;
+        darkest: string;
+    };
+    secondary1: {
+        '10': string;
+        '20': string;
+        '30': string;
+        '40': string;
+        '50': string;
+        '60': string;
+        '70': string;
+        '80': string;
+        '90': string;
+        main: string;
+        lightest: string;
+        light: string;
+        dark: string;
+        darkest: string;
+    };
+    secondary2: {
+        '10': string;
+        '20': string;
+        '30': string;
+        '40': string;
+        '50': string;
+        '60': string;
+        '70': string;
+        '80': string;
+        '90': string;
+        main: string;
+        lightest: string;
+        light: string;
+        dark: string;
+        darkest: string;
+    };
+    secondary3: {
+        '10': string;
+        '20': string;
+        '30': string;
+        '40': string;
+        '50': string;
+        '60': string;
+        '70': string;
+        '80': string;
+        '90': string;
+        main: string;
+        lightest: string;
+        light: string;
+        dark: string;
+        darkest: string;
+    };
+    secondary4: {
+        '10': string;
+        '20': string;
+        '30': string;
+        '40': string;
+        '50': string;
+        '60': string;
+        '70': string;
+        '80': string;
+        '90': string;
+        main: string;
+        lightest: string;
+        light: string;
+        dark: string;
+        darkest: string;
+    };
+    teal: {
+        '10': string;
+        '20': string;
+        '30': string;
+        '40': string;
+        '50': string;
+        '60': string;
+        '65': string;
+        '70': string;
+        '75': string;
+        '80': string;
+        '85': string;
+        '90': string;
+        main: string;
+        'main-hover': string;
+        light: string;
+        lightest: string;
+        dark: string;
+        'dark-hover': string;
+        darkest: string;
+    };
+    pink: {
+        '10': string;
+        '20': string;
+        '30': string;
+        '40': string;
+        '50': string;
+        '60': string;
+        '70': string;
+        '80': string;
+        '90': string;
+        main: string;
+        lightest: string;
+        light: string;
+        dark: string;
+        darkest: string;
+    };
+    yellow: {
+        '10': string;
+        '20': string;
+        '30': string;
+        '40': string;
+        '50': string;
+        '60': string;
+        '70': string;
+        '80': string;
+        '90': string;
+        main: string;
+        lightest: string;
+        light: string;
+        dark: string;
+        darkest: string;
+    };
+    green: {
+        '10': string;
+        '20': string;
+        '30': string;
+        '40': string;
+        '50': string;
+        '60': string;
+        '70': string;
+        '80': string;
+        '90': string;
+        main: string;
+        lightest: string;
+        light: string;
+        dark: string;
+        darkest: string;
+    };
+    navy: {
+        '10': string;
+        '20': string;
+        '30': string;
+        '40': string;
+        '50': string;
+        '60': string;
+        '70': string;
+        '80': string;
+        '90': string;
+        main: string;
+        lightest: string;
+        light: string;
+        dark: string;
+        darkest: string;
+    };
+    neutrals: {
+        '10': string;
+        '20': string;
+        '30': string;
+        '40': string;
+        '50': string;
+        '60': string;
+        '70': string;
+        '80': string;
+        '90': string;
+        '100': string;
+        main: string;
+        darkest: string;
+        dark: string;
+        bodyText: string;
+        bg1: string;
+        white: string;
+    };
+    errors: {
+        '10': string;
+        '20': string;
+        '30': string;
+        '40': string;
+        '50': string;
+        '60': string;
+        '70': string;
+        '80': string;
+        '90': string;
+        main: string;
+        lightest: string;
+        light: string;
+        dark: string;
+        darkest: string;
+    };
+    orders: {
+        OPPORTUNITY: {
+            main: string;
+        };
+        PRESENTATION: {
+            main: string;
+        };
+        ESTIMATE: {
+            main: string;
+        };
+        'PRE-SALES': {
+            main: string;
+        };
+        'SALES ORDER': {
+            main: string;
+            current: string;
+            previous: string;
+        };
+        INVOICE: {
+            main: string;
+        };
+        TARGET: {
+            main: string;
+        };
+    };
+    notes: {
+        main: string;
+    };
+    calls: {
+        main: string;
+    };
+    meetings: {
+        main: string;
+    };
+    left_nav: {
+        main: string;
+        sub_menu: {
+            bg: string;
+            link: {
+                bg: string;
+                text: string;
+            };
+        };
+        link: {
+            text: string;
+        };
+    };
+    text: {
+        main: string;
+        bold: string;
+        body: string;
+        title: string;
+        label: string;
+        placeholder: {
+            default: string;
+            hover: string;
+        };
+    };
+    white: string;
+    black: string;
+    primary: string;
+    cta: string;
+    primary0: string;
+    primary10: string;
+    primary100: string;
+    disabledButton: string;
+    disabledButtonBorder: string;
+    texttitle: string;
+    textlabel: string;
+    textbody: string;
+    textplaceholder: string;
+    bggray: string;
+    bgblue: string;
+    inputBorder: string;
+    special1: string;
+    special2: string;
+    special3: string;
+    primaryBg: string;
+    special2Bg: string;
+    transparent: string;
+    error: string;
+    primary2: string;
+    primary20: string;
+    primary200: string;
+    tableHeaderBg: string;
+    tableBorder: string;
+    input: {
+        background: string;
+        border: string;
+        text: string;
+        placeholder: string;
+        active: {
+            border: string;
+            text: string;
+        };
+        hover: {
+            border: string;
+            placeholder: string;
+        };
+        error: {
+            border: string;
+        };
+        disabled: {
+            text: string;
+            background: string;
+        };
+        iconWrapper: {
+            background: string;
+            active: {
+                background: string;
+            };
+            hover: {
+                background: string;
+            };
+            disabled: {
+                background: string;
+            };
+        };
+        icon: {
+            fill: string;
+            active: {
+                fill: string;
+            };
+            hover: {
+                fill: string;
+            };
+            disabled: {
+                fill: string;
+            };
+        };
+    };
+    select: {
+        background: string;
+        border: string;
+        text: string;
+        placeholder: string;
+        active: {
+            border: string;
+            text: string;
+        };
+        hover: {
+            border: string;
+            placeholder: string;
+        };
+        error: {
+            border: string;
+        };
+        disabled: {
+            background: string;
+            border: string;
+        };
+        dropdownIcon: {
+            color: string;
+            error: {
+                color: string;
+            };
+            disabled: string;
+        };
+        clearIcon: {
+            color: string;
+        };
+    };
+};
+
+declare const fontFamilies: {
+    skuFontRegular: string;
+    skuFontDemibold: string;
+    skuFontBold: string;
+    skuFontMedium: string;
+    regular: string;
+    demibold: string;
+    bold: string;
+    medium: string;
+    fallbacks: string[];
+};
+declare const fonts: string[];
+declare const fontStyles: {
+    h1: {
+        fontSize: string;
+        lineHeight: string;
+        fontFamily: string;
+    };
+    h2: {
+        fontSize: string;
+        lineHeight: string;
+        fontFamily: string;
+    };
+    h3: {
+        fontSize: string;
+        lineHeight: string;
+        fontFamily: string;
+    };
+    h4: {
+        fontSize: string;
+        lineHeight: string;
+        fontFamily: string;
+    };
+    p: {
+        large: {
+            fontSize: string;
+            lineHeight: string;
+            fontFamily: string;
+        };
+        medium: {
+            fontSize: string;
+            lineHeight: string;
+            fontFamily: string;
+        };
+        small: {
+            fontSize: string;
+            lineHeight: string;
+            fontFamily: string;
+        };
+    };
+    button: {
+        huge: {
+            fontSize: string;
+            lineHeight: string;
+            fontFamily: string;
+        };
+        large: {
+            fontSize: string;
+            lineHeight: string;
+            fontFamily: string;
+        };
+        medium: {
+            fontSize: string;
+            lineHeight: string;
+            fontFamily: string;
+        };
+        small: {
+            fontSize: string;
+            lineHeight: string;
+            fontFamily: string;
+        };
+        tiny: {
+            fontSize: string;
+            lineHeight: string;
+            fontFamily: string;
+        };
+    };
+    label: {
+        fontSize: string;
+        lineHeight: string;
+        fontFamily: string;
+    };
+};
+declare const themeOptions: {
+    colors: {
+        primary1: {
+            '10': string;
+            '20': string;
+            '30': string;
+            '40': string;
+            '50': string;
+            '60': string;
+            '65': string;
+            '70': string;
+            '75': string;
+            '80': string;
+            '85': string;
+            '90': string;
+            main: string;
+            'main-hover': string;
+            light: string;
+            lightest: string;
+            dark: string;
+            'dark-hover': string;
+            darkest: string;
+        };
+        secondary1: {
+            '10': string;
+            '20': string;
+            '30': string;
+            '40': string;
+            '50': string;
+            '60': string;
+            '70': string;
+            '80': string;
+            '90': string;
+            main: string;
+            lightest: string;
+            light: string;
+            dark: string;
+            darkest: string;
+        };
+        secondary2: {
+            '10': string;
+            '20': string;
+            '30': string;
+            '40': string;
+            '50': string;
+            '60': string;
+            '70': string;
+            '80': string;
+            '90': string;
+            main: string;
+            lightest: string;
+            light: string;
+            dark: string;
+            darkest: string;
+        };
+        secondary3: {
+            '10': string;
+            '20': string;
+            '30': string;
+            '40': string;
+            '50': string;
+            '60': string;
+            '70': string;
+            '80': string;
+            '90': string;
+            main: string;
+            lightest: string;
+            light: string;
+            dark: string;
+            darkest: string;
+        };
+        secondary4: {
+            '10': string;
+            '20': string;
+            '30': string;
+            '40': string;
+            '50': string;
+            '60': string;
+            '70': string;
+            '80': string;
+            '90': string;
+            main: string;
+            lightest: string;
+            light: string;
+            dark: string;
+            darkest: string;
+        };
+        teal: {
+            '10': string;
+            '20': string;
+            '30': string;
+            '40': string;
+            '50': string;
+            '60': string;
+            '65': string;
+            '70': string;
+            '75': string;
+            '80': string;
+            '85': string;
+            '90': string;
+            main: string;
+            'main-hover': string;
+            light: string;
+            lightest: string;
+            dark: string;
+            'dark-hover': string;
+            darkest: string;
+        };
+        pink: {
+            '10': string;
+            '20': string;
+            '30': string;
+            '40': string;
+            '50': string;
+            '60': string;
+            '70': string;
+            '80': string;
+            '90': string;
+            main: string;
+            lightest: string;
+            light: string;
+            dark: string;
+            darkest: string;
+        };
+        yellow: {
+            '10': string;
+            '20': string;
+            '30': string;
+            '40': string;
+            '50': string;
+            '60': string;
+            '70': string;
+            '80': string;
+            '90': string;
+            main: string;
+            lightest: string;
+            light: string;
+            dark: string;
+            darkest: string;
+        };
+        green: {
+            '10': string;
+            '20': string;
+            '30': string;
+            '40': string;
+            '50': string;
+            '60': string;
+            '70': string;
+            '80': string;
+            '90': string;
+            main: string;
+            lightest: string;
+            light: string;
+            dark: string;
+            darkest: string;
+        };
+        navy: {
+            '10': string;
+            '20': string;
+            '30': string;
+            '40': string;
+            '50': string;
+            '60': string;
+            '70': string;
+            '80': string;
+            '90': string;
+            main: string;
+            lightest: string;
+            light: string;
+            dark: string;
+            darkest: string;
+        };
+        neutrals: {
+            '10': string;
+            '20': string;
+            '30': string;
+            '40': string;
+            '50': string;
+            '60': string;
+            '70': string;
+            '80': string;
+            '90': string;
+            '100': string;
+            main: string;
+            darkest: string;
+            dark: string;
+            bodyText: string;
+            bg1: string;
+            white: string;
+        };
+        errors: {
+            '10': string;
+            '20': string;
+            '30': string;
+            '40': string;
+            '50': string;
+            '60': string;
+            '70': string;
+            '80': string;
+            '90': string;
+            main: string;
+            lightest: string;
+            light: string;
+            dark: string;
+            darkest: string;
+        };
+        orders: {
+            OPPORTUNITY: {
+                main: string;
+            };
+            PRESENTATION: {
+                main: string;
+            };
+            ESTIMATE: {
+                main: string;
+            };
+            'PRE-SALES': {
+                main: string;
+            };
+            'SALES ORDER': {
+                main: string;
+                current: string;
+                previous: string;
+            };
+            INVOICE: {
+                main: string;
+            };
+            TARGET: {
+                main: string;
+            };
+        };
+        notes: {
+            main: string;
+        };
+        calls: {
+            main: string;
+        };
+        meetings: {
+            main: string;
+        };
+        left_nav: {
+            main: string;
+            sub_menu: {
+                bg: string;
+                link: {
+                    bg: string;
+                    text: string;
+                };
+            };
+            link: {
+                text: string;
+            };
+        };
+        text: {
+            main: string;
+            bold: string;
+            body: string;
+            title: string;
+            label: string;
+            placeholder: {
+                default: string;
+                hover: string;
+            };
+        };
+        white: string;
+        black: string;
+        primary: string;
+        cta: string;
+        primary0: string;
+        primary10: string;
+        primary100: string;
+        disabledButton: string;
+        disabledButtonBorder: string;
+        texttitle: string;
+        textlabel: string;
+        textbody: string;
+        textplaceholder: string;
+        bggray: string;
+        bgblue: string;
+        inputBorder: string;
+        special1: string;
+        special2: string;
+        special3: string;
+        primaryBg: string;
+        special2Bg: string;
+        transparent: string;
+        error: string;
+        primary2: string;
+        primary20: string;
+        primary200: string;
+        tableHeaderBg: string;
+        tableBorder: string;
+        input: {
+            background: string;
+            border: string;
+            text: string;
+            placeholder: string;
+            active: {
+                border: string;
+                text: string;
+            };
+            hover: {
+                border: string;
+                placeholder: string;
+            };
+            error: {
+                border: string;
+            };
+            disabled: {
+                text: string;
+                background: string;
+            };
+            iconWrapper: {
+                background: string;
+                active: {
+                    background: string;
+                };
+                hover: {
+                    background: string;
+                };
+                disabled: {
+                    background: string;
+                };
+            };
+            icon: {
+                fill: string;
+                active: {
+                    fill: string;
+                };
+                hover: {
+                    fill: string;
+                };
+                disabled: {
+                    fill: string;
+                };
+            };
+        };
+        select: {
+            background: string;
+            border: string;
+            text: string;
+            placeholder: string;
+            active: {
+                border: string;
+                text: string;
+            };
+            hover: {
+                border: string;
+                placeholder: string;
+            };
+            error: {
+                border: string;
+            };
+            disabled: {
+                background: string;
+                border: string;
+            };
+            dropdownIcon: {
+                color: string;
+                error: {
+                    color: string;
+                };
+                disabled: string;
+            };
+            clearIcon: {
+                color: string;
+            };
+        };
+    };
+    fonts: string[];
+    fontFamily: string;
+    fontFamilies: {
+        skuFontRegular: string;
+        skuFontDemibold: string;
+        skuFontBold: string;
+        skuFontMedium: string;
+        regular: string;
+        demibold: string;
+        bold: string;
+        medium: string;
+        fallbacks: string[];
+    };
+    fontStyles: {
+        h1: {
+            fontSize: string;
+            lineHeight: string;
+            fontFamily: string;
+        };
+        h2: {
+            fontSize: string;
+            lineHeight: string;
+            fontFamily: string;
+        };
+        h3: {
+            fontSize: string;
+            lineHeight: string;
+            fontFamily: string;
+        };
+        h4: {
+            fontSize: string;
+            lineHeight: string;
+            fontFamily: string;
+        };
+        p: {
+            large: {
+                fontSize: string;
+                lineHeight: string;
+                fontFamily: string;
+            };
+            medium: {
+                fontSize: string;
+                lineHeight: string;
+                fontFamily: string;
+            };
+            small: {
+                fontSize: string;
+                lineHeight: string;
+                fontFamily: string;
+            };
+        };
+        button: {
+            huge: {
+                fontSize: string;
+                lineHeight: string;
+                fontFamily: string;
+            };
+            large: {
+                fontSize: string;
+                lineHeight: string;
+                fontFamily: string;
+            };
+            medium: {
+                fontSize: string;
+                lineHeight: string;
+                fontFamily: string;
+            };
+            small: {
+                fontSize: string;
+                lineHeight: string;
+                fontFamily: string;
+            };
+            tiny: {
+                fontSize: string;
+                lineHeight: string;
+                fontFamily: string;
+            };
+        };
+        label: {
+            fontSize: string;
+            lineHeight: string;
+            fontFamily: string;
+        };
+    };
+    space: {
+        '0': string;
+        '1': string;
+        '2': string;
+        '3': string;
+        '4': string;
+        '5': string;
+        '6': string;
+        '7': string;
+        '8': string;
+        '9': string;
+        '10': string;
+    };
+};
+declare function getColor(color?: string, def?: string): string;
+declare function getFontStyle(value?: string, def?: string): string;
+declare function getThemeColor(props: {
+    [key: string]: any;
+}, color: string, fallbackColor?: string): string;
+declare function getThemeFontStyle(props: {
+    [key: string]: any;
+}, value: string, fallbackValue?: string): string;
+declare function getThemeFontSize(props: {
+    [key: string]: any;
+}, value: string, fallbackValue?: string): string;
+declare function getThemeFontFamily(props: {
+    [key: string]: any;
+}, fallbackValue?: string): string;
+declare function getThemeProperty(props: {
+    [key: string]: any;
+}, prop: string, value?: string, fallbackValue?: string): string;
+declare const Theme: ({ theme, globalStyles, additionalGlobalStyles, children }: React$1.PropsWithChildren<{
+    theme?: object | undefined;
+    globalStyles?: boolean | undefined;
+    additionalGlobalStyles?: AdditionalStyles | undefined;
+}>) => JSX.Element;
+
+declare type TextProp = {
+    color?: keyof typeof colors;
+    bold?: boolean;
+} & SharedStyleTypes;
+declare const Text: StyledComponent<"span", any, {
+    color?: "transparent" | "primary1" | "secondary1" | "secondary2" | "secondary3" | "secondary4" | "teal" | "pink" | "yellow" | "green" | "navy" | "neutrals" | "errors" | "orders" | "notes" | "calls" | "meetings" | "left_nav" | "text" | "white" | "black" | "primary" | "cta" | "primary0" | "primary10" | "primary100" | "disabledButton" | "disabledButtonBorder" | "texttitle" | "textlabel" | "textbody" | "textplaceholder" | "bggray" | "bgblue" | "inputBorder" | "special1" | "special2" | "special3" | "primaryBg" | "special2Bg" | "error" | "primary2" | "primary20" | "primary200" | "tableHeaderBg" | "tableBorder" | "input" | "select" | undefined;
+    bold?: boolean | undefined;
+} & SharedStyleTypes, never>;
+declare const Link: StyledComponent<React$1.FC<{
+    highlight?: boolean | undefined;
+} & (({
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+} & {
+    theme?: any;
+} & ({} | {
+    children?: React$1.ReactNode;
+})) & {
+    as?: string | React$1.ComponentType<any> | undefined;
+    forwardedAs?: string | React$1.ComponentType<any> | undefined;
+}) & SharedStyleTypes>, any, {}, never>;
+declare const Number: React$1.FC<{
+    num: number;
+    commas?: boolean;
+    decimalPoints?: number;
+} & SharedStyleTypes>;
+
+declare const Publisher: (props: React$1.PropsWithChildren<{}>) => JSX.Element;
+declare const FeedPost: (props: React$1.PropsWithChildren<{
+    author: any;
+    subject?: string;
+    body: React$1.ReactNode;
+    date: string;
+    comments?: React$1.ReactNode[];
+} & SharedStyleTypes>) => JSX.Element;
+
+declare type StateType = {
+    hasError: boolean;
+};
+declare class ErrorBoundary extends Component<object, StateType> {
+    constructor(props: StateType);
+    componentDidCatch(error: Error | any, info: string | any): void;
+    render(): React$1.ReactNode;
+}
+
+declare const CustomDateInput: React$1.ForwardRefExoticComponent<{
+    noMargin?: boolean | undefined;
+    error?: boolean | undefined;
+} & {
+    hasIcon?: boolean | undefined;
+} & SharedStyleTypes & React$1.InputHTMLAttributes<HTMLInputElement> & {
+    isClearable?: boolean | undefined;
+} & React$1.RefAttributes<HTMLInputElement>>;
+declare type DatepickerPorps = Omit<ReactDatePickerProps, 'value'> & Omit<InputProps, 'value'> & {
+    value?: Date | null;
+    placeholder?: string;
+};
+declare const Datepicker: React$1.ForwardRefExoticComponent<Omit<ReactDatePickerProps, "value"> & Omit<InputProps, "value"> & {
+    value?: Date | null | undefined;
+    placeholder?: string | undefined;
+} & React$1.RefAttributes<BaseDatePicker>>;
+
+declare const StyledDropdown: StyledComponent<"div", any, {}, never>;
+declare type DropdownContentProps = {
+    primary?: boolean;
+    underlined?: boolean;
+    text?: string;
+};
+declare const DropdownItem: StyledComponent<"div", any, DropdownContentProps, never>;
+declare const DropDownContent: StyledComponent<"div", any, DropdownContentProps, never>;
+declare type TDropdownItem = {
+    onClick?: Function | VoidFunction | null;
+    props?: {
+        [key: string]: any;
+        underlined?: boolean;
+    };
+    content: ReactNode | string | any;
+};
+declare type DropdownProps = {
+    items?: Array<TDropdownItem>;
+    icon?: ReactNode;
+    openMenu?: boolean;
+    mouseLeaveCallback?: any;
+    size?: TSize$1;
+    style?: CSSObject;
+};
+declare const Dropdown: ({ items, children, underlined, primary, text, icon, openMenu, mouseLeaveCallback, size, style, ...props }: React$1.PropsWithChildren<DropdownProps & DropdownContentProps>) => JSX.Element;
+
+declare const Badge: StyledComponent<"span", any, {
+    color?: string | undefined;
+} & SharedStyleTypes, never>;
+
+declare type BackdropTypes = {
+    animationDuration?: number;
+};
+declare const Backdrop: StyledComponent<"div", any, BackdropTypes, never>;
+
+declare type HeadlessTableProps = React$1.PropsWithChildren<{
+    columns: any;
+    data: object[];
+    rowIdField: string;
+    selectedRowId?: string | null;
+    defaultSort?: {
+        id: string;
+        desc: boolean;
+    };
+    defaultPageSize?: number;
+    defaultPageIndex?: number;
+    defaultScrollOffset?: number;
+    defaultHorizontalOffset?: number;
+    scrollOffsetDivRef?: any;
+    horizontalOffsetDivRef?: any;
+    pageIndexDivRef?: any;
+    onChangeSelected?: any;
+    onChangeSortOrColumns?: any;
+    sortDirectionDivRef?: any;
+    currentColumnsDivRef?: any;
+    minHeight?: any;
+    pagination?: boolean;
+} & SharedStyleTypes>;
+declare function HeadlessTable({ columns, data, rowIdField, defaultSort, defaultPageSize, defaultPageIndex, defaultScrollOffset, defaultHorizontalOffset, pageIndexDivRef, onChangeSelected, onChangeSortOrColumns, scrollOffsetDivRef, horizontalOffsetDivRef, selectedRowId, sortDirectionDivRef, currentColumnsDivRef, minHeight, pagination }: HeadlessTableProps): JSX.Element;
+
+declare const Sparkles: React$1.FC<{
+    color: string;
+}>;
+
+declare type DropdownContentProps$1 = {
+    text?: string;
+    color?: string;
+    active?: boolean;
+    rounded?: boolean;
+};
+declare const StatusDropdown: ({ items, text, value, row, setMenuIsOpen, disabled, ...props }: {
+    items: {
+        onClick?: any;
+        props?: {
+            [key: string]: any;
+        } | undefined;
+        content: ReactNode | string | any;
+        value: string;
+        color: string;
+    }[];
+    value: {
+        onClick?: any;
+        props?: {
+            [key: string]: any;
+        } | undefined;
+        content: ReactNode | string | any;
+        value: string;
+        color: string;
+    };
+    row: any;
+    setMenuIsOpen?: any;
+    disabled?: boolean | undefined;
+} & DropdownContentProps$1) => JSX.Element;
+
+declare type DropdownContentProps$2 = {
+    text?: string;
+    active?: boolean;
+    rounded?: boolean;
+    showCircles?: boolean;
+    scrollContentHeight?: string;
+    background?: string;
+};
+declare type StateDropdownItemProps = {
+    onClick?: any;
+    props?: {
+        [key: string]: any;
+    };
+    content: ReactNode | string | any;
+    value: string;
+    order: number;
+};
+declare type StateDropdownProps = {
+    items: Array<StateDropdownItemProps>;
+    value: StateDropdownItemProps;
+    row: any;
+    showCircles?: boolean;
+    maxCircles?: number;
+    dataTip?: any;
+    dataFor?: string;
+    background?: string;
+} & DropdownContentProps$2;
+declare const StateDropdown: ({ items, text, value, row, showCircles, maxCircles, dataTip, dataFor, background, ...props }: StateDropdownProps) => JSX.Element;
+
+declare type CollapseStyledProps = {
+    duration?: number;
+    height?: null | number;
+};
+declare type CollapseWrapperProps = CollapseStyledProps;
+declare type CollapsiblePanelTitleProps = {};
+declare type CollapsibleProps = CollapseWrapperProps & CollapsiblePanelTitleProps & {
+    style?: React$1.CSSProperties;
+    isOpen?: boolean;
+    padded?: boolean;
+    onEntering?: Function;
+    onEntered?: Function;
+    onExit?: Function;
+    onExiting?: Function;
+    onExited?: Function;
+};
+declare type CollapsiblePanelProps = React$1.PropsWithChildren<Omit<CollapsibleProps & {
+    onClick?: null | ((i?: number | null) => void);
+}, "isOpen"> & {
+    title?: string;
+    isDefaultOpen?: boolean;
+    components?: {
+        [key in string]: any;
+    };
+    titleProps?: {
+        [key in string]: any;
+    };
+}>;
+declare type CollapsiblePanelsProps = {
+    panels?: Array<CollapsiblePanelProps & {
+        wrapperProps?: {
+            [key in string]: any;
+        };
+    }>;
+    spaceBetween?: boolean;
+    onClickPanel?: null | ((i?: number | null) => void);
+};
+declare const CollapseStyled: StyledComponent<"div", any, CollapseStyledProps, never>;
+declare const CollapseWrapper: StyledComponent<"div", any, CollapseStyledProps, never>;
+declare const CollapsiblePanelTitle: StyledComponent<"div", any, {}, never>;
+declare function Collapsible({ onEntering, onEntered, onExit, onExiting, onExited, duration, isOpen, children, style, padded, ...props }: React$1.PropsWithChildren<CollapsibleProps>): JSX.Element;
+declare function CollapsiblePanel({ title, duration, isDefaultOpen, components, children, titleProps, ...props }: React$1.PropsWithChildren<CollapsiblePanelProps>): JSX.Element;
+declare function CollapsiblePanels({ panels, spaceBetween, onClickPanel }: CollapsiblePanelsProps): JSX.Element;
+
+declare type ProgressBarValue = {
+    value: number;
+    text?: (v?: string | number | Object) => string | number;
+    color?: string;
+    textColor?: string;
+};
+declare type ProgressBarsProps = React$1.PropsWithChildren<{
+    values: ProgressBarValue[];
+    max: number;
+    color?: string;
+    error?: string;
+    title?: string;
+} & SharedStyleTypes>;
+declare const MultiProgress: ({ labeled, error, values, max: maxVal, ...props }: {
+    values: ProgressBarValue[];
+    max: number;
+    color?: string | undefined;
+    error?: string | undefined;
+    title?: string | undefined;
+} & SharedStyleTypes & {
+    children?: React$1.ReactNode;
+} & {
+    labeled?: boolean | undefined;
+    style?: React$1.CSSProperties | undefined;
+}) => JSX.Element;
+declare const LabeledMultiProgress: ({ title, ...props }: ProgressBarsProps & {
+    style?: React$1.CSSProperties;
+}) => JSX.Element;
+//# sourceMappingURL=MultiProgress.d.ts.map
+
+declare type ThermometerProps = {
+    style?: React$1.CSSProperties;
+    title?: string;
+    target: number;
+    value1: number;
+    value1Label?: string | ((v: number) => string);
+    barColor?: string;
+    labelTextColor?: string;
+    isSecondary?: boolean;
+};
+declare function Thermometer({ title, target, value1, value1Label, barColor, labelTextColor, isSecondary, ...props }: ThermometerProps): JSX.Element;
+
+declare function TableIcon({ width, height, viewBox, fill, style, ...props }: React$1.PropsWithChildren<{
+    width?: number | string;
+    height?: number | string;
+    viewBox?: string;
+    fill?: string;
+    style?: object;
+}>): JSX.Element;
+
+declare const IconDoc: ({ ext, ...props }: {
+    [key: string]: any;
+    ext?: string | undefined;
+}) => JSX.Element;
+
+declare const DownloadIcon: ({ fill, ...props }: {
+    [key: string]: any;
+}) => JSX.Element;
+
+declare const CalendarIcon: React$1.ForwardRefExoticComponent<{
+    width?: string | number | undefined;
+    height?: string | number | undefined;
+    viewBox?: string | undefined;
+    fill?: string | undefined;
+    style?: object | undefined;
+} & React$1.RefAttributes<SVGSVGElement>>;
+
+declare function CouponIcon({ color, width, mr, mt }: React$1.PropsWithChildren<{
+    color?: string;
+    width?: string;
+    mr?: number;
+    mt?: number;
+}>): JSX.Element;
+
+declare function AwaitingProofIcon({ color, width, mr, mt }: React$1.PropsWithChildren<{
+    color?: string;
+    width?: string;
+    mr?: number;
+    mt?: number;
+}>): JSX.Element;
+
+declare function ProofReceivedIcon({ color, width, mr, mt }: React$1.PropsWithChildren<{
+    color?: string;
+    width?: string;
+    mr?: number;
+    mt?: number;
+}>): JSX.Element;
+
+declare function PendingApprovalIcon({ color, width, mr, mt }: React$1.PropsWithChildren<{
+    color?: string;
+    width?: string;
+    mr?: number;
+    mt?: number;
+}>): JSX.Element;
+
+declare function ChangeRequestedIcon({ color, width, mr, mt }: React$1.PropsWithChildren<{
+    color?: string;
+    width?: string;
+    mr?: number;
+    mt?: number;
+}>): JSX.Element;
+
+declare function ClientApprovedIcon({ color, width, mr, mt }: React$1.PropsWithChildren<{
+    color?: string;
+    width?: string;
+    mr?: number;
+    mt?: number;
+}>): JSX.Element;
+
+declare function ProofingCompleteIcon({ color, width, mr, mt }: React$1.PropsWithChildren<{
+    color?: string;
+    width?: string;
+    mr?: number;
+    mt?: number;
+}>): JSX.Element;
+
+declare function InfoIcon({ color, width, mr, ml, mt }: React$1.PropsWithChildren<{
+    color?: string;
+    width?: string;
+    mr?: number;
+    ml?: number;
+    mt?: number;
+}>): JSX.Element;
+
+declare function LockIcon({ color, width, mr, ml, mt, locked }: React$1.PropsWithChildren<{
+    color?: string;
+    width?: string;
+    mr?: number;
+    ml?: number;
+    mt?: number;
+    locked?: boolean;
+}>): JSX.Element;
+
+declare function PanelIcon({ color, width, mr, mt }: React$1.PropsWithChildren<{
+    color?: string;
+    width?: string;
+    mr?: number;
+    mt?: number;
+}>): JSX.Element;
+
+declare function NoteIcon({ color, width, mr, mt }: React$1.PropsWithChildren<{
+    color?: string;
+    width?: string;
+    mr?: number;
+    mt?: number;
+}>): JSX.Element;
+
+declare function TaskIcon({ color, width, mr, mt }: React$1.PropsWithChildren<{
+    color?: string;
+    width?: string;
+    mr?: number;
+    mt?: number;
+}>): JSX.Element;
+
+declare function ChatIcon({ color, width, mr, mt, notifs }: React$1.PropsWithChildren<{
+    color?: string;
+    width?: string;
+    mr?: number;
+    mt?: number;
+    notifs?: number;
+}>): JSX.Element;
+
+declare function ColumnSelectIcon({ width, mr, mt }: React$1.PropsWithChildren<{
+    width?: string;
+    mr?: number;
+    mt?: number;
+}>): JSX.Element;
+
+declare function NoMarketingIcon({ color, width, mr, mt }: React$1.PropsWithChildren<{
+    color?: string;
+    width?: string;
+    mr?: number;
+    mt?: number;
+}>): JSX.Element;
+
+declare function PinIcon({ color, width, mr, mt, pinned }: React$1.PropsWithChildren<{
+    color?: string;
+    width?: string;
+    mr?: number;
+    mt?: number;
+    pinned?: boolean;
+}>): JSX.Element;
+
+declare function TrashIcon({ color, width, mr, mt }: React$1.PropsWithChildren<{
+    color?: string;
+    width?: string;
+    mr?: number;
+    mt?: number;
+    pinned?: boolean;
+}>): JSX.Element;
+
+declare function NavConnectIcon({ width, style, fill, color, outline, // outline/completely filled in
+...props }: React$1.PropsWithChildren<{
+    fill?: string;
+    color?: string;
+    width?: number | string;
+    outline?: boolean;
+    style?: React$1.CSSProperties;
+}>): JSX.Element;
+
+declare function NavSalesIcon({ width, style, fill, color, outline, // outline/completely filled in
+...props }: React$1.PropsWithChildren<{
+    fill?: string;
+    color?: string;
+    width?: number | string;
+    outline?: boolean;
+    style?: React$1.CSSProperties;
+}>): JSX.Element;
+
+declare function NavProdIcon({ width, style, fill, color, outline, // outline/completely filled in
+...props }: React$1.PropsWithChildren<{
+    fill?: string;
+    color?: string;
+    width?: number | string;
+    outline?: boolean;
+    style?: React$1.CSSProperties;
+}>): JSX.Element;
+
+declare function NavFinanceIcon({ width, style, fill, color, outline, // outline/completely filled in
+...props }: React$1.PropsWithChildren<{
+    fill?: string;
+    color?: string;
+    width?: number | string;
+    outline?: boolean;
+    style?: React$1.CSSProperties;
+}>): JSX.Element;
+
+declare function NavManagementIcon({ width, style, fill, color, outline, // outline/completely filled in
+...props }: React$1.PropsWithChildren<{
+    fill?: string;
+    color?: string;
+    width?: number | string;
+    outline?: boolean;
+    style?: React$1.CSSProperties;
+}>): JSX.Element;
+
+declare function YesMarketingIcon({ color, width, mr, mt }: React$1.PropsWithChildren<{
+    color?: string;
+    width?: string;
+    mr?: number;
+    mt?: number;
+}>): JSX.Element;
+
+declare const iconSize: {
+    tiny: {
+        width: number;
+        height: number;
+        viewBox: string;
+    };
+    small: {
+        width: number;
+        height: number;
+        viewBox: string;
+    };
+    medium: {
+        width: number;
+        height: number;
+        viewBox: string;
+    };
+    large: {
+        width: number;
+        height: number;
+        viewBox: string;
+    };
+    huge: {
+        width: number;
+        height: number;
+        viewBox: string;
+    };
+    default: {
+        height: number;
+        width: number;
+        viewBox: string;
+    };
+};
+declare type TIconSizeObj = typeof iconSize;
+declare type TIconSize = keyof typeof iconSize;
+declare type BaseSVGIconProps = {
+    size?: TIconSize;
+    width?: string | number;
+    height?: string | number;
+    iconSizes?: TIconSizeObj;
+};
+declare type SVGIconProps = React.SVGAttributes<SVGElement> & BaseSVGIconProps;
+declare const SVG: StyledComponent<"svg", any, BaseSVGIconProps, never>;
+
+declare type MarketingStatusIconProps = SVGIconProps & {
+    approved?: boolean;
+};
+declare function MarketingStatusIcon({ color, size, approved, ...props }: MarketingStatusIconProps): JSX.Element;
+
+declare type GearIconProps = SVGIconProps & {
+    filled?: boolean;
+};
+declare function GearIcon({ color, filled, size, ...props }: GearIconProps): JSX.Element;
+
+declare function NavResourcesIcon({ width, style, fill, color, outline, // outline/completely filled in
+...props }: React$1.PropsWithChildren<{
+    fill?: string;
+    color?: string;
+    width?: number | string;
+    outline?: boolean;
+    style?: React$1.CSSProperties;
+}>): JSX.Element;
+
+declare const CircleProgressIcon: ({ sqSize, strokeWidth, percentage, strokeColor, textColor, text, textStyle, ...props }: React$1.PropsWithChildren<{
+    sqSize?: number | undefined;
+    strokeWidth?: number | undefined;
+    percentage?: number | undefined;
+    strokeColor?: string | undefined;
+    textColor?: string | undefined;
+    text?: string | undefined;
+    textStyle?: React$1.CSSProperties | undefined;
+}>) => JSX.Element;
+//# sourceMappingURL=CircleProgressIcon.d.ts.map
+
+declare function Loading({ height, width, animationDuration, barWidth, barRadius, colorful, bars, viewBox, rotate, startColor, endColor, ...props }: {
+    height?: number;
+    width?: number;
+    animationDuration?: number;
+    barWidth?: number;
+    barRadius?: number;
+    colorful?: boolean;
+    bars?: number;
+    viewBox?: string;
+    startColor?: string;
+    endColor?: string;
+    rotate?: boolean;
+} & SharedStyleTypes): JSX.Element;
+//# sourceMappingURL=Loading.d.ts.map
+
+declare function Icon({ width, height, fill, style, ...props }: React$1.PropsWithChildren<{
+    width?: number | string;
+    height?: number | string;
+    fill?: string;
+    style?: React$1.CSSProperties;
+}>): JSX.Element;
+
+declare function Icon$1({ width, height, fill, style, ...props }: React$1.PropsWithChildren<{
+    width?: number | string;
+    height?: number | string;
+    fill?: string;
+    style?: React$1.CSSProperties;
+}>): JSX.Element;
+
+declare function Icon$2({ fill, style, ...props }: React$1.PropsWithChildren<{
+    width?: number | string;
+    height?: number | string;
+    fill?: string;
+    style?: React$1.CSSProperties;
+}>): JSX.Element;
+
+declare function Icon$3({ width, height, fill, style, ...props }: React$1.PropsWithChildren<{
+    width?: number | string;
+    height?: number | string;
+    fill?: string;
+    style?: React$1.CSSProperties;
+}>): JSX.Element;
+
+declare function Icon$4({ width, height, fill, style, ...props }: React$1.PropsWithChildren<{
+    width?: number | string;
+    height?: number | string;
+    fill?: string;
+    style?: React$1.CSSProperties;
+}>): JSX.Element;
+
+declare function Icon$5({ width, height, fill, style, ...props }: React$1.PropsWithChildren<{
+    width?: number | string;
+    height?: number | string;
+    fill?: string;
+    style?: React$1.CSSProperties;
+}>): JSX.Element;
+
+declare function Icon$6({ width, height, fill, style, ...props }: React$1.PropsWithChildren<{
+    width?: number | string;
+    height?: number | string;
+    fill?: string;
+    style?: React$1.CSSProperties;
+}>): JSX.Element;
+
+declare type UsersIconProps = SVGIconProps;
+declare function UsersIcon({ color, size, ...props }: UsersIconProps): JSX.Element;
+
+declare function Icon$7({ width, height, fill, style, ...props }: React$1.PropsWithChildren<{
+    width?: number | string;
+    height?: number | string;
+    fill?: string;
+    style?: React$1.CSSProperties;
+}>): JSX.Element;
+
+declare function Icon$8({ width, height, fill, style, ...props }: React$1.PropsWithChildren<{
+    width?: number | string;
+    height?: number | string;
+    fill?: string;
+    style?: React$1.CSSProperties;
+}>): JSX.Element;
+
+declare type FolderIconProps = SVGIconProps;
+declare function FolderIcon({ color, size, ...props }: FolderIconProps): JSX.Element;
+
+declare const Icon$9: React$1.ForwardRefExoticComponent<{
+    width?: string | number | undefined;
+    height?: string | number | undefined;
+    fill?: string | undefined;
+    style?: object | undefined;
+} & React$1.RefAttributes<SVGSVGElement>>;
+//# sourceMappingURL=Calendar2Icon.d.ts.map
+
+declare function Icon$a({ width, height, fill, style, ...props }: React$1.PropsWithChildren<{
+    width?: number | string;
+    height?: number | string;
+    fill?: string;
+    style?: React$1.CSSProperties;
+}>): JSX.Element;
+
+declare type CrossIconProps = SVGIconProps;
+declare function CrossIcon({ color, size, ...props }: CrossIconProps): JSX.Element;
+
+declare type IconVariants = 'primary' | 'cta';
+declare type OpportunityCircleIconProps = SVGIconProps & {
+    variant?: IconVariants;
+    selected?: boolean;
+};
+declare function OpportunityCircleIcon({ variant, selected, size, style, ...props }: OpportunityCircleIconProps): JSX.Element;
+
+declare type IconVariants$1 = 'primary' | 'cta';
+declare type PresentationCircleIconProps = SVGIconProps & {
+    variant?: IconVariants$1;
+    selected?: boolean;
+};
+declare function PresentationCircleIcon({ variant, selected, size, style, ...props }: PresentationCircleIconProps): JSX.Element;
+
+declare type IconVariants$2 = 'primary' | 'cta';
+declare type EstimateCircleIconProps = SVGIconProps & {
+    variant?: IconVariants$2;
+    selected?: boolean;
+};
+declare function EstimateCircleIcon({ variant, selected, size, style, ...props }: EstimateCircleIconProps): JSX.Element;
+
+declare type IconVariants$3 = 'primary' | 'cta';
+declare type SalesOrderCircleIconProps = SVGIconProps & {
+    variant?: IconVariants$3;
+    selected?: boolean;
+};
+declare function SalesOrderCircleIcon({ variant, selected, size, style, ...props }: SalesOrderCircleIconProps): JSX.Element;
+
+declare type DollarIconProps = SVGIconProps;
+declare function DollarIcon({ color, size, ...props }: DollarIconProps): JSX.Element;
+
+declare type BotIconProps = SVGIconProps;
+declare function BotIcon({ color, size, ...props }: BotIconProps): JSX.Element;
+
+declare type GalleryIconProps = SVGIconProps;
+declare function GalleryIcon({ color, size, ...props }: GalleryIconProps): JSX.Element;
+
+declare type ListIconProps = SVGIconProps;
+declare function ListIcon({ color, size, ...props }: ListIconProps): JSX.Element;
+
+declare type TilesIconProps = SVGIconProps & {
+    filled?: boolean;
+};
+declare function TilesIcon({ color, size, filled, ...props }: TilesIconProps): JSX.Element;
+
+declare type UserIconProps = SVGIconProps;
+declare function UserIcon({ color, size, ...props }: UserIconProps): JSX.Element;
+
+declare type ArrowIconDirection = 'up' | 'right' | 'down' | 'left';
+declare type ArrowIconProps = SVGIconProps & {
+    direction?: ArrowIconDirection;
+};
+declare function ArrowIcon({ color, direction, size, ...props }: ArrowIconProps): JSX.Element;
+
+declare type ChevronIconDirection = 'up' | 'right' | 'down' | 'left' | 'updown' | 'leftright';
+declare type ChevronIconProps = SVGIconProps & {
+    direction?: ChevronIconDirection;
+};
+declare function ChevronIcon({ color, direction, size, ...props }: ChevronIconProps): JSX.Element;
+
+declare type FilledChevronIconDirection = 'up' | 'right' | 'down' | 'left' | 'updown' | 'leftright';
+declare type FilledChevronIconProps = SVGIconProps & {
+    direction?: FilledChevronIconDirection;
+};
+declare function FilledChevronIcon({ color, direction, size, ...props }: FilledChevronIconProps): JSX.Element;
+
+declare type CheckmarkOnlyIconProps = SVGIconProps;
+declare function CheckmarkOnlyIcon({ color, size, ...props }: CheckmarkOnlyIconProps): JSX.Element;
+
+declare type AddIconProps = SVGIconProps;
+declare function AddIcon({ color, size, ...props }: AddIconProps): JSX.Element;
+
+declare type SubtractIconProps = SVGIconProps;
+declare function SubtractIcon({ color, size, ...props }: SubtractIconProps): JSX.Element;
+
+declare type SearchIconProps = SVGIconProps;
+declare function SearchIcon({ color, size, ...props }: SearchIconProps): JSX.Element;
+
+declare type ClockIconProps = SVGIconProps;
+declare function ClockIcon({ color, size, ...props }: ClockIconProps): JSX.Element;
+
+declare type ClipboardIconProps = SVGIconProps;
+declare function ClipboardIcon({ color, size, ...props }: ClipboardIconProps): JSX.Element;
+
+declare type RadioIconProps = SVGIconProps & {
+    selected?: boolean;
+};
+declare function RadioIcon({ color, size, selected, ...props }: RadioIconProps): JSX.Element;
+
+declare const datepickerStyles = "\n.commonsku-styles-datepicker {\n  &.react-datepicker-wrapper {\n    width: 100%;\n  }\n\n  .react-datepicker__input-container {\n    display: block;\n    width: 100%;\n  }\n\n  .react-datepicker {\n    border: 1px solid var(--color-primary1-60);\n    outline: none;\n    box-shadow: 1px  1px 0px var(--color-primary1-60),\n              -1px -1px 0px var(--color-primary1-60),\n              1px -1px 0px var(--color-primary1-60),\n              -1px  1px 0px var(--color-primary1-60);\n  }\n\n  .react-datepicker__current-month,\n  .react-datepicker-time__header,\n  .react-datepicker-year-header,\n  .react-datepicker__header {\n    padding-top: 8px;\n    padding-bottom: 8px;\n  }\n\n  .react-datepicker__header,\n  .react-datepicker__today-button {\n    background: var(--color-neutrals-20);\n    padding-top: 8px;\n    padding-bottom: 8px;\n  }\n\n  .react-datepicker__header {\n    border-bottom: none;\n  }\n\n  .react-datepicker__today-button {\n    border-top: none;\n  }\n\n  .react-datepicker__day {\n    outline: none;\n  }\n\n  .react-datepicker__day :not(\n    .react-datepicker__day--outside-month,\n    .react-datepicker__day--selected\n  ) {\n    color: var(--color-neutrals-90);\n  }\n\n  .react-datepicker__day:hover :not(.react-datepicker__day--selected),\n  .react-datepicker__month-text:hover,\n  .react-datepicker__quarter-text:hover,\n  .react-datepicker__year-text:hover {\n    background-color: var(--color-neutrals-20);\n  }\n\n  .react-datepicker__day--outside-month {\n    color: var(--color-neutrals-70);\n  }\n\n  .react-datepicker__day--weekend {\n    color: var(--color-errors-main);\n  }\n\n  .react-datepicker__day--selected,\n  .react-datepicker__day--keyboard-selected,\n  .react-datepicker__month-text--keyboard-selected,\n  .react-datepicker__quarter-text--keyboard-selected,\n  .react-datepicker__year-text--keyboard-selected\n   {\n    background-color: var(--color-primary1-60);\n    color: #fff;\n  }\n\n  .react-datepicker__triangle {\n    border-bottom-color: var(--color-neutrals-20) !important;\n  }\n\n  .react-datepicker__triangle::before {\n    border-bottom-color: var(--color-primary1-60) !important;\n    border-top-color: var(--color-primary1-60) !important;\n  }\n\n  .react-datepicker__month-select,\n  .react-datepicker__year-select {\n    height: 30px;\n    border: 2px solid var(--color-primary1-60);\n    padding: 3px;\n    border-radius: 5px;\n    outline: none;\n  }\n\n  .react-datepicker__navigation {\n    border: 0.45rem solid transparent;\n\n    &.react-datepicker__navigation--next {\n      border-left: 7px solid var(--color-primary1-60);\n      margin-top: 8px;\n    }\n  \n    &.react-datepicker__navigation--previous {\n      border-right: 7px solid var(--color-primary1-60);\n      margin-top: 8px;\n    }\n  }\n}\n";
+//# sourceMappingURL=datepickerStyles.d.ts.map
+
+declare type CalendarDayBodyProps = React$1.PropsWithChildren<{
+    day: Date;
+    selectedDate: Date;
+    onClick: React$1.MouseEventHandler<HTMLDivElement>;
+    weekend?: boolean;
+}>;
+declare const CalendarDayBody: ({ day, selectedDate, onClick, children, weekend, ...props }: CalendarDayBodyProps) => JSX.Element;
+//# sourceMappingURL=CalendarDayBody.d.ts.map
+
+declare type CalendarDaysBodyProps = {
+    days: Array<{
+        __id__: string;
+        day: Date;
+    }>;
+    currentMonth: Date;
+    selectedDate: Date;
+    onClickDay?: (day: Date) => any;
+    dayBodyProps?: CSSObject | {
+        [key: string]: any;
+    };
+    weekend?: boolean;
+    components?: {
+        DayBody?: (props: React$1.PropsWithChildren<{
+            day: Date;
+            selectedDate: Date;
+            onClick: React$1.MouseEventHandler;
+            [key: string]: any;
+        }>) => React$1.ReactElement;
+    };
+};
+declare const CalendarDaysBody: ({ days, currentMonth, selectedDate, onClickDay, components, dayBodyProps, weekend, ...props }: CalendarDaysBodyProps) => JSX.Element;
+//# sourceMappingURL=CalendarDaysBody.d.ts.map
+
+declare const CalendarDaysHeader: ({ currentMonth, selectedDate, weekend }: {
+    [key: string]: any;
+    currentMonth: Date;
+    selectedDate: Date;
+    weekend: boolean;
+}) => JSX.Element;
+//# sourceMappingURL=CalendarDaysHeader.d.ts.map
+
+declare const CalendarWrapper: StyledComponent<"div", any, {}, never>;
+//# sourceMappingURL=CalendarWrapper.d.ts.map
+
+declare const DaysBodyWrapper: StyledComponent<"div", any, {}, never>;
+//# sourceMappingURL=DaysBodyWrapper.d.ts.map
+
+declare const DaysHeaderWrapper: StyledComponent<"div", any, {
+    justify?: string | undefined;
+    wrap?: string | undefined;
+    align?: string | undefined;
+    padded?: boolean | undefined;
+    start?: boolean | undefined;
+    end?: boolean | undefined;
+    middle?: boolean | undefined;
+} & SharedStyleTypes, never>;
+//# sourceMappingURL=DaysHeaderWrapper.d.ts.map
+
+declare const DefaultCalendarFooter: ({ currentWeek }: {
+    currentWeek: number;
+}) => JSX.Element;
+//# sourceMappingURL=DefaultCalendarFooter.d.ts.map
+
+declare const DefaultCalendarHeader: ({ onPrevWeek, onNextWeek, currentMonth, }: {
+    onPrevWeek: React$1.MouseEventHandler;
+    onNextWeek: React$1.MouseEventHandler;
+    currentMonth: Date;
+}) => JSX.Element;
+//# sourceMappingURL=DefaultCalendarHeader.d.ts.map
+
+declare const HeaderWrapper: StyledComponent<"div", any, {
+    justify?: string | undefined;
+    wrap?: string | undefined;
+    align?: string | undefined;
+    padded?: boolean | undefined;
+    start?: boolean | undefined;
+    end?: boolean | undefined;
+    middle?: boolean | undefined;
+} & SharedStyleTypes, never>;
+//# sourceMappingURL=HeaderWrapper.d.ts.map
+
+declare const StyledDayBody: StyledComponent<"div", any, SizerTypes & SharedStyleTypes & {
+    selected?: boolean | undefined;
+    today?: boolean | undefined;
+    row?: boolean | undefined;
+    disabled?: boolean | undefined;
+}, never>;
+//# sourceMappingURL=StyledDayBody.d.ts.map
+
+declare const StyledDayText: StyledComponent<"span", any, {
+    color?: "input" | "select" | "text" | "transparent" | "primary1" | "secondary1" | "secondary2" | "secondary3" | "secondary4" | "teal" | "pink" | "yellow" | "green" | "navy" | "neutrals" | "errors" | "orders" | "notes" | "calls" | "meetings" | "left_nav" | "white" | "black" | "primary" | "cta" | "primary0" | "primary10" | "primary100" | "disabledButton" | "disabledButtonBorder" | "texttitle" | "textlabel" | "textbody" | "textplaceholder" | "bggray" | "bgblue" | "inputBorder" | "special1" | "special2" | "special3" | "primaryBg" | "special2Bg" | "error" | "primary2" | "primary20" | "primary200" | "tableHeaderBg" | "tableBorder" | undefined;
+    bold?: boolean | undefined;
+} & SharedStyleTypes & {
+    selected?: boolean | undefined;
+}, never>;
+//# sourceMappingURL=StyledDayText.d.ts.map
+
+declare const TasksCalendarDayBody: ({ day, tasks }: {
+    [key: string]: any;
+    day: Date;
+    selectedDate: Date;
+}) => JSX.Element;
+
+declare type ACTIONS = 'TOGGLE_CHECKBOX' | 'DROP';
+declare type onUpdateTaskFunc = (newData: CalendarTaskProps, otherData: {
+    index: number;
+    action: ACTIONS;
+    oldTask: CalendarTaskProps;
+    sourceType?: string;
+    updatedFields?: string[];
+    day__id?: string;
+    task__id?: string;
+}) => void | any;
+declare type onClickTaskFunc = (task: CalendarTaskProps) => void | any;
+declare type TCalendarView = {
+    type: string;
+    title: string;
+    selected: boolean;
+    Icon?: TButtonIcon;
+};
+declare type onClickViewFunc = (viewType: string, view?: TCalendarView) => void;
+
+declare type onChangeWeekFunc = (obj: {
+    date: Date;
+    week: number;
+    month: number;
+    year: number;
+    action: string;
+}) => void;
+declare type onChangeMonthFunc = (obj: {
+    date: Date;
+    month: number;
+    year: number;
+    action: string;
+}) => void;
+declare type changeWeekFunc = (action: string, value?: Date | undefined) => void;
+declare type changeDateFunc = (value: Date) => void;
+declare type useCalendarProps = {
+    onChangeWeek?: onChangeWeekFunc;
+    onChangeMonth?: onChangeMonthFunc;
+};
+
+declare type TasksCalendarHeaderProps = {
+    onNextWeek: VoidFunction;
+    onPrevWeek: VoidFunction;
+    changeDate: changeDateFunc;
+    changeWeek: changeWeekFunc;
+    onNextMonth: VoidFunction;
+    onPrevMonth: VoidFunction;
+    onResetDate: VoidFunction;
+    currentMonth: Date;
+    currentWeek: number;
+    selectedDate: Date;
+    weekendsCheckbox: ReactNode;
+    showAddTaskBtn?: boolean;
+    onClickAddTask?: VoidFunction;
+    tabs?: TTab[];
+    views?: TCalendarView[];
+    onClickView?: onClickViewFunc;
+};
+declare const TasksCalendarHeader: ({ onPrevWeek, onNextWeek, currentMonth, currentWeek, changeDate, onResetDate, selectedDate, tabs, views, weekendsCheckbox, showAddTaskBtn, onClickAddTask, onClickView, }: React$1.PropsWithChildren<TasksCalendarHeaderProps>) => JSX.Element;
+
+declare type TasksCalendarFooterProps = {
+    onNextWeek: VoidFunction;
+    onPrevWeek: VoidFunction;
+    onNextMonth: VoidFunction;
+    onPrevMonth: VoidFunction;
+    currentMonth: Date;
+    currentWeek: number;
+    selectedDate: Date;
+    [key: string]: any;
+};
+declare const TasksCalendarFooter: ({ currentWeek, tasks, }: React$1.PropsWithChildren<TasksCalendarFooterProps>) => JSX.Element;
+
+declare type CalendarHeaderComponentProps = {
+    onNextWeek: VoidFunction;
+    onPrevWeek: VoidFunction;
+    onNextMonth: VoidFunction;
+    onPrevMonth: VoidFunction;
+    currentMonth: Date;
+    currentWeek: number;
+    selectedDate: Date;
+    [key: string]: any;
+};
+declare type CalendarProps = {
+    components?: {
+        Header?: (props: React$1.PropsWithChildren<CalendarHeaderComponentProps>) => React$1.ReactElement;
+        Footer?: (props: React$1.PropsWithChildren<CalendarHeaderComponentProps>) => React$1.ReactElement;
+        DayBody?: (props: React$1.PropsWithChildren<{
+            [key: string]: any;
+        }>) => React$1.ReactElement;
+    };
+    showHeader?: boolean;
+    showFooter?: boolean;
+    extraProps?: {
+        dayBody?: CSSObject | {
+            [key: string]: any;
+        };
+        header?: CSSObject | {
+            [key: string]: any;
+        };
+        footer?: CSSObject | {
+            [key: string]: any;
+        };
+    };
+};
+declare const Calendar: ({ components, extraProps, ...props }: CalendarProps) => JSX.Element;
+
+declare type TasksCalendarProps = CalendarProps & {
+    tasks: Array<CalendarTaskProps>;
+    headerTabs?: Array<TTab>;
+    footerTasks?: Array<CalendarTaskProps>;
+    components?: {
+        Header?: (props: React$1.PropsWithChildren<{
+            [key: string]: any;
+        }>) => React$1.ReactElement;
+        Footer?: (props: React$1.PropsWithChildren<{
+            [key: string]: any;
+        }>) => React$1.ReactElement;
+    };
+};
+declare const TasksCalendar: ({ tasks, headerTabs, footerTasks, components, ...props }: TasksCalendarProps) => JSX.Element;
+
+declare type DraggableTasksCalendarProps = CalendarProps & {
+    tasks: Array<CalendarTaskProps>;
+    onUpdateTask: onUpdateTaskFunc;
+    onClickTask?: onClickTaskFunc;
+    headerTabs?: Array<TTab>;
+    footerTasks?: Array<CalendarTaskProps>;
+    weekend?: boolean;
+    components?: {
+        Header?: (props: React$1.PropsWithChildren<{
+            [key: string]: any;
+        }>) => React$1.ReactElement;
+        Footer?: (props: React$1.PropsWithChildren<{
+            [key: string]: any;
+        }>) => React$1.ReactElement;
+    };
+    onToggleWeekend?: (weekend: boolean) => void;
+    showAddTaskBtn?: boolean;
+    onClickAddTask?: VoidFunction;
+    loading?: boolean;
+    views?: Array<TCalendarView>;
+    onClickView?: onClickViewFunc;
+    showFooterTasks?: boolean;
+} & useCalendarProps;
+declare const DraggableTasksCalendar: ({ views, tasks, onUpdateTask, onClickTask, headerTabs, footerTasks, components, weekend, onChangeWeek, onChangeMonth, onToggleWeekend, showAddTaskBtn, onClickAddTask, onClickView, loading, showFooterTasks, ...props }: DraggableTasksCalendarProps) => JSX.Element;
+
+declare const SimpleWindowedTableStyles: StyledComponent<"div", any, {
+    bordered?: string | boolean | undefined;
+    rowClickable?: boolean | undefined;
+    hoverRowBg?: string | boolean | undefined;
+    selectedRowIndex?: number | undefined;
+    selectedRowStyle?: boolean | CSSObject | undefined;
+}, never>;
+declare type SimpleWindowedTableProps = {
+    columns: Column<object>[];
+    data: object[];
+    itemSize?: number;
+    height?: number;
+    minWidth?: number;
+    maxWidth?: number;
+    defaultSort?: SortingRule<string>;
+    onClickRow?: (row?: object, index?: number) => void;
+    onScroll?: ((props: ListOnScrollProps) => any);
+    onUpdateData?: (...args: any) => void;
+    useTableProps?: object;
+    tableHeaderProps?: {
+        className?: string;
+        style?: React$1.CSSProperties;
+    };
+    tableFooterProps?: {
+        className?: string;
+        style?: React$1.CSSProperties;
+    };
+    TableFooter?: React$1.ReactNode;
+    className?: string;
+    hideFooter?: boolean;
+    NoRowsFound?: (props: React$1.PropsWithChildren<{
+        [key: string]: any;
+    }>) => React$1.ReactElement;
+};
+declare function SimpleWindowedTable({ columns, data, itemSize, height, minWidth, maxWidth, defaultSort, onClickRow, onScroll, onUpdateData, useTableProps, tableHeaderProps, tableFooterProps, hideFooter, className, NoRowsFound, }: SimpleWindowedTableProps): JSX.Element;
+
+export { AddIcon, ArrowIcon, Artwork, ArtworkProps, SKUAsyncSelect as AsyncSelect, Avatar, AvatarColor, AvatarShape, AvatarSize, AwaitingProofIcon, Backdrop, Background, Badge, BotIcon, Box, Icon$6 as BulletIcon, Button, ButtonVariant, ButtonsGroup, Calendar, Icon$9 as Calendar2Icon, CalendarDayBody, CalendarDaysBody, CalendarDaysHeader, CalendarIcon, CalendarTask, CalendarTaskProps, CalendarWrapper, ChangeRequestedIcon, ChatIcon, CheckMark, Icon$7 as CheckboxIcon, Icon$3 as CheckmarkIcon, CheckmarkOnlyIcon, ChevronIcon, CircleProgressIcon, ClientApprovedIcon, ClipboardIcon, ClockIcon, Col, ColPropTypes, CollapseStyled, CollapseStyledProps, CollapseWrapper, CollapseWrapperProps, Collapsible, CollapsiblePanel, CollapsiblePanelProps, CollapsiblePanelTitle, CollapsiblePanelTitleProps, CollapsiblePanels, CollapsiblePanelsProps, CollapsibleProps, ColumnSelectIcon, CouponIcon, SKUCreatableSelect as CreatableSelect, CrossIcon, CustomDateInput, Datepicker, DatepickerPorps, DaysBodyWrapper, DaysHeaderWrapper, DefaultCalendarFooter, DefaultCalendarHeader, DollarIcon, Dot, DownloadIcon, DraggableTasksCalendar, DropArea, DropAreaProps, DropDownContent, Dropdown, DropdownItem, DropdownProps, DropzoneTypes, Dropzoned, DropzonedPreviews, ErrorBoundary, Icon$2 as ErrorIcon, EstimateCircleIcon, FeedPost, FilledChevronIcon, FolderIcon, GalleryIcon, GearIcon, GlobalStyle, Grid, H1, H2, H3, H4, H5, H6, HeaderWrapper, HeadlessTable, IconButton, IconButtonProps, IconDoc, InfoIcon, Input, InputIconLabel, InputIconLabelContainer, InputProps, Label, LabeledAsyncSelect, LabeledCheckbox, LabeledCheckboxProps, LabeledCreatableSelect, LabeledIconInput, LabeledInput, LabeledMultiProgress, LabeledProgress, LabeledRadio, LabeledRadioGroup, LabeledSelect, LabeledTextarea, Icon$4 as LeftArrowIcon, Link, ListIcon, Loading, LockIcon, MarketingStatusIcon, MultiProgress, NavConnectIcon, NavFinanceIcon, NavManagementIcon, NavProdIcon, NavResourcesIcon, NavSalesIcon, NoMarketingIcon, NoteIcon, Number, OpportunityCircleIcon, Overlay, Padding, Page, PanelContact, PanelIcon, PanelTileContact, PendingApprovalIcon, PinIcon, Popup, PopupHeader, PopupProps, PresentationCircleIcon, Product, Progress, Icon$a as PromostandardsIcon, ProofReceivedIcon, ProofingCompleteIcon, Publisher, Radio, RadioIcon, RadioLabel, Icon$8 as ReceiptLongIcon, ResponsiveTable, Icon$5 as RightArrowIcon, Row, RowPropTypes, SHARED_STYLE_MAPS, Icon$1 as SalesDownArrowIcon, SalesOrderCircleIcon, Icon as SalesUpArrowIcon, SearchIcon, SKUSelect as Select, SharedStyleTypes, SharedStyles, ShowPopup, SidePanel, SimpleWindowedTable, SimpleWindowedTableProps, SimpleWindowedTableStyles, SizerCss, SizerTypes, SizerWrapper, Sparkles, Spinner, StarRating, StateDropdown, StatusDropdown, StyledCalendarTaskBody, StyledDayBody, StyledDayText, StyledDropArea, StyledDropdown, StyledPanel, StyledTask, SubtractIcon, SVG as SvgIcon, TBody, TButtonIcon, TD, TDropdownItem, TH, THSorted, THead, TR, TSize$1 as TSize, TSizeOffset, TSizeOffsetRight, TSizeStyle, TTab, Tab, TabBar, Table, TableIcon, Tabs, TabsProps, Task, TaskBody, TaskIcon, TaskLabel, TaskName, TaskProps, TasksCalendar, TasksCalendarDayBody, TasksCalendarFooter, TasksCalendarHeader, Text, TextProp, Textarea, Theme, Thermometer, TilesIcon, Toggle, ToggleLink, TrashIcon, UserIcon, UsersIcon, Wrapper, YesMarketingIcon, colors, datepickerStyles, fontFamilies, fontStyles, fonts, getColor, getFontStyle, getThemeColor, getThemeFontFamily, getThemeFontSize, getThemeFontStyle, getThemeProperty, sizes, themeOptions };