@commonsku/styles 1.13.7 → 1.14.2

package/dist/index.d.ts

@@ -0,0 +1,2580 @@
+/// <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 ButtonPreset = 'edit' | 'delete' | 'add' | 'remove' | 'close';
+declare type ButtonVariant = 'primary' | 'secondary' | 'cta' | 'error' | 'error-light' | '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' | 'top';
+    preset?: ButtonPreset;
+    style?: React$1.CSSProperties;
+}> & React$1.ButtonHTMLAttributes<HTMLButtonElement>;
+declare function IconButton(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 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;
+    altText?: string;
+    pointer?: boolean;
+    iconSizes?: TIconSizeObj;
+} & SharedStyleTypes;
+declare type SVGIconProps = React.SVGAttributes<SVGElement> & BaseSVGIconProps;
+declare const SVG: StyledComponent<"svg", any, {
+    size?: "tiny" | "small" | "medium" | "large" | "huge" | "default" | undefined;
+    width?: string | number | undefined;
+    height?: string | number | undefined;
+    altText?: string | undefined;
+    pointer?: boolean | undefined;
+    iconSizes?: {
+        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;
+        };
+    } | undefined;
+} & SharedStyleTypes, never>;
+
+declare type LightIndicatorProps = {
+    name: string;
+    on?: boolean;
+    large?: boolean;
+};
+declare function LightIndicator({ name, on, large, ...props }: LightIndicatorProps): JSX.Element;
+
+declare type DefaultStarProps = React$1.PropsWithChildren<{
+    initialSelected?: boolean;
+    forceSelected?: boolean;
+    hoverText?: any;
+    noText?: boolean;
+    width?: string | number;
+    color?: string;
+}>;
+declare function DefaultStar({ initialSelected, forceSelected, hoverText, noText, children, width, color, ...props }: DefaultStarProps): JSX.Element;
+
+declare type CancelButtonProps = {
+    size?: TSize$1;
+    style?: React$1.CSSProperties;
+    variant?: ButtonVariant;
+} & SharedStyleTypes & SizerTypes;
+declare function CancelButton({ size, variant, style, ...Props }: CancelButtonProps): JSX.Element;
+
+declare type TableIconProps = SVGIconProps;
+declare function TableIcon({ color, size, altText, ...props }: TableIconProps): JSX.Element;
+
+declare const IconDoc: ({ ext, ...props }: {
+    [key: string]: any;
+    ext?: string | undefined;
+}) => JSX.Element;
+
+declare type CouponIconProps = SVGIconProps;
+declare function CouponIcon({ color, size, altText, ...props }: CouponIconProps): JSX.Element;
+
+declare type AwaitingProofIconProps = SVGIconProps;
+declare function AwaitingProofIcon({ color, size, altText, ...props }: AwaitingProofIconProps): JSX.Element;
+
+declare type ProofReceivedIconProps = SVGIconProps;
+declare function ProofReceivedIcon({ color, size, altText, ...props }: ProofReceivedIconProps): JSX.Element;
+
+declare type PendingApprovalIconProps = SVGIconProps;
+declare function PendingApprovalIcon({ color, size, altText, ...props }: PendingApprovalIconProps): JSX.Element;
+
+declare type ChangeRequestedIconProps = SVGIconProps;
+declare function ChangeRequestedIcon({ color, size, altText, ...props }: ChangeRequestedIconProps): JSX.Element;
+
+declare type ClientApprovedIconProps = SVGIconProps;
+declare function ClientApprovedIcon({ color, size, altText, ...props }: ClientApprovedIconProps): JSX.Element;
+
+declare type ProofingCompleteIconProps = SVGIconProps;
+declare function ProofingCompleteIcon({ color, size, altText, ...props }: ProofingCompleteIconProps): 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 type ColumnSelectIconProps = SVGIconProps;
+declare function ColumnSelectIcon({ color, size, altText, ...props }: ColumnSelectIconProps): JSX.Element;
+
+declare type NavConnectIconProps = SVGIconProps & {
+    filled?: boolean;
+};
+declare function NavConnectIcon({ color, size, filled, altText, ...props }: NavConnectIconProps): JSX.Element;
+
+declare type NavSalesIconProps = SVGIconProps & {
+    filled?: boolean;
+};
+declare function NavSalesIcon({ color, size, filled, altText, ...props }: NavSalesIconProps): JSX.Element;
+
+declare type NavProdIconProps = SVGIconProps & {
+    filled?: boolean;
+};
+declare function NavProdIcon({ color, size, filled, altText, ...props }: NavProdIconProps): JSX.Element;
+
+declare type NavFinanceIconProps = SVGIconProps & {
+    filled?: boolean;
+};
+declare function NavFinanceIcon({ color, size, filled, altText, ...props }: NavFinanceIconProps): JSX.Element;
+
+declare type NavResourcesIconProps = SVGIconProps & {
+    filled?: boolean;
+};
+declare function NavResourcesIcon({ color, size, filled, altText, ...props }: NavResourcesIconProps): JSX.Element;
+
+declare type NavManagementIconProps = SVGIconProps & {
+    filled?: boolean;
+};
+declare function NavManagementIcon({ color, size, filled, altText, ...props }: NavManagementIconProps): JSX.Element;
+
+declare type TrashIconProps = SVGIconProps & {
+    filled?: boolean;
+    pinned?: boolean;
+};
+declare function TrashIcon({ color, size, filled, pinned, altText, ...props }: TrashIconProps): JSX.Element;
+
+declare type PinIconProps = SVGIconProps & {
+    filled?: boolean;
+    pinned?: boolean;
+    unpin?: boolean;
+};
+declare function PinIcon({ color, size, filled, unpin, pinned, altText, ...props }: PinIconProps): JSX.Element;
+
+declare type TaskIconProps = SVGIconProps;
+declare function TaskIcon({ color, size, altText, ...props }: TaskIconProps): JSX.Element;
+
+declare type AddTaskIconProps = SVGIconProps;
+declare function AddTaskIcon({ color, size, altText, ...props }: AddTaskIconProps): JSX.Element;
+
+declare type NoteIconProps = SVGIconProps;
+declare function NoteIcon({ color, size, altText, ...props }: NoteIconProps): JSX.Element;
+
+declare type AddNoteIconProps = SVGIconProps;
+declare function AddNoteIcon({ color, size, altText, ...props }: AddNoteIconProps): JSX.Element;
+
+declare type LockIconProps = SVGIconProps & {
+    locked?: boolean;
+};
+declare function LockIcon({ color, size, locked, altText, ...props }: LockIconProps): JSX.Element;
+
+declare type InfoIconProps = SVGIconProps & {
+    filled?: boolean;
+    pinned?: boolean;
+};
+declare function InfoIcon({ color, size, filled, pinned, altText, ...props }: InfoIconProps): JSX.Element;
+
+declare type DownloadIconProps = SVGIconProps;
+declare function DownloadIcon({ color, size, altText, ...props }: DownloadIconProps): JSX.Element;
+
+declare type MarketingStatusIconProps = SVGIconProps & {
+    approved?: boolean;
+};
+declare function MarketingStatusIcon({ color, size, approved, altText, ...props }: MarketingStatusIconProps): JSX.Element;
+
+declare type GearIconProps = SVGIconProps & {
+    filled?: boolean;
+};
+declare function GearIcon({ color, filled, size, altText, ...props }: GearIconProps): JSX.Element;
+
+declare type CircleProgressIconProps = SVGIconProps & {
+    sqSize?: number;
+    strokeWidth?: number;
+    percentage?: number;
+    strokeColor?: string;
+    textColor?: string;
+    text?: string;
+    viewBox?: string;
+    textStyle?: React$1.CSSProperties;
+};
+declare function CircleProgressIcon({ sqSize, strokeWidth, percentage, strokeColor, textColor, text, textStyle, color, size, altText, ...props }: CircleProgressIconProps): JSX.Element;
+
+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 type SalesArrowIconDirection = 'up' | 'down';
+declare type SalesArrowIconProps = SVGIconProps & {
+    direction?: SalesArrowIconDirection;
+};
+declare function SalesArrowIcon({ color, size, direction, altText, ...props }: SalesArrowIconProps): JSX.Element;
+
+declare type AlertIconProps = SVGIconProps & {
+    filled?: boolean;
+};
+declare function AlertIcon({ color, size, filled, altText, ...props }: AlertIconProps): JSX.Element;
+
+declare type AddIconProps = SVGIconProps;
+declare function AddIcon({ color, size, altText, ...props }: AddIconProps): JSX.Element;
+
+declare type BulletIconProps = SVGIconProps;
+declare function BulletIcon({ color, size, ...props }: BulletIconProps): JSX.Element;
+
+declare type UsersIconProps = SVGIconProps;
+declare function UsersIcon({ color, size, altText, ...props }: UsersIconProps): JSX.Element;
+
+declare type ReceiptLongIconProps = SVGIconProps;
+declare function ReceiptLongIcon({ color, size, altText, ...props }: ReceiptLongIconProps): JSX.Element;
+
+declare type FolderIconProps = SVGIconProps;
+declare function FolderIcon({ color, size, ...props }: FolderIconProps): JSX.Element;
+
+declare type CalendarIconProps = SVGIconProps;
+declare function CalendarIcon({ color, size, altText, ...props }: CalendarIconProps): JSX.Element;
+
+declare type PromostandardsIconProps = SVGIconProps;
+declare function PromostandardsIcon({ size, altText, ...props }: PromostandardsIconProps): JSX.Element;
+
+declare type XIconProps = SVGIconProps;
+declare function XIcon({ color, size, altText, ...props }: XIconProps): JSX.Element;
+
+declare type IconVariants = 'primary' | 'cta';
+declare type OpportunityCircleIconProps = SVGIconProps & {
+    variant?: IconVariants;
+    selected?: boolean;
+};
+declare function OpportunityCircleIcon({ variant, selected, size, altText, 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, altText, 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, altText, 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, altText, style, ...props }: SalesOrderCircleIconProps): JSX.Element;
+
+declare type DollarIconProps = SVGIconProps;
+declare function DollarIcon({ color, size, altText, ...props }: DollarIconProps): JSX.Element;
+
+declare type BotIconProps = SVGIconProps;
+declare function BotIcon({ color, size, altText, ...props }: BotIconProps): JSX.Element;
+
+declare type GalleryIconProps = SVGIconProps;
+declare function GalleryIcon({ color, size, altText, ...props }: GalleryIconProps): JSX.Element;
+
+declare type ListIconProps = SVGIconProps;
+declare function ListIcon({ color, size, altText, ...props }: ListIconProps): JSX.Element;
+
+declare type TilesIconProps = SVGIconProps & {
+    filled?: boolean;
+};
+declare function TilesIcon({ color, size, filled, altText, ...props }: TilesIconProps): JSX.Element;
+
+declare type UserIconProps = SVGIconProps;
+declare function UserIcon({ color, size, altText, ...props }: UserIconProps): JSX.Element;
+
+declare type ArrowIconDirection = 'up' | 'right' | 'down' | 'left';
+declare type ArrowIconProps = SVGIconProps & {
+    direction?: ArrowIconDirection;
+};
+declare function ArrowIcon({ color, direction, altText, 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, altText, 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, altText, size, ...props }: FilledChevronIconProps): JSX.Element;
+
+declare type CheckmarkIconProps = SVGIconProps;
+declare function CheckmarkIcon({ color, size, altText, ...props }: CheckmarkIconProps): JSX.Element;
+
+declare type AddIconProps$1 = SVGIconProps;
+declare function AddIcon$1({ color, size, altText, ...props }: AddIconProps$1): JSX.Element;
+
+declare type SubtractIconProps = SVGIconProps;
+declare function SubtractIcon({ color, size, altText, ...props }: SubtractIconProps): JSX.Element;
+
+declare type SearchIconProps = SVGIconProps;
+declare function SearchIcon({ color, size, altText, ...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, altText, ...props }: RadioIconProps): JSX.Element;
+
+declare type EditIconProps = SVGIconProps & {
+    filled?: boolean;
+};
+declare function EditIcon({ color, size, filled, altText, ...props }: EditIconProps): JSX.Element;
+
+declare type GridIconProps = SVGIconProps;
+declare function GridIcon({ color, size, altText, ...props }: GridIconProps): JSX.Element;
+
+declare type TemplateIconProps = SVGIconProps & {
+    filled?: boolean;
+};
+declare function TemplateIcon({ color, size, filled, altText, ...props }: TemplateIconProps): JSX.Element;
+
+declare type PercentIconProps = SVGIconProps;
+declare function PercentIcon({ color, size, altText, ...props }: PercentIconProps): JSX.Element;
+
+declare type TargetIconProps = SVGIconProps;
+declare function TargetIcon({ color, size, altText, ...props }: TargetIconProps): JSX.Element;
+
+declare type IntegrationsIconProps = SVGIconProps & {
+    filled?: boolean;
+};
+declare function IntegrationsIcon({ color, size, filled, altText, ...props }: IntegrationsIconProps): JSX.Element;
+
+declare type MailIconProps = SVGIconProps & {
+    filled?: boolean;
+};
+declare function MailIcon({ color, size, filled, altText, ...props }: MailIconProps): JSX.Element;
+
+declare type EpsIconProps = SVGIconProps;
+declare function EpsIcon({ color, size, altText, ...props }: EpsIconProps): JSX.Element;
+
+declare type StarIconProps = SVGIconProps & {
+    hover?: boolean;
+    filled?: boolean;
+};
+declare function StarIcon({ color, size, hover, filled, altText, ...props }: StarIconProps): JSX.Element;
+
+declare type EyeIconProps = SVGIconProps & {
+    hide?: boolean;
+};
+declare function EyeIcon({ color, size, hide, altText, ...props }: EyeIconProps): JSX.Element;
+
+declare type MenuIconProps = SVGIconProps;
+declare function MenuIcon({ color, size, altText, ...props }: MenuIconProps): 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$1 as AddIcon, AddNoteIcon, AddTaskIcon, AlertIcon, ArrowIcon, Artwork, ArtworkProps, SKUAsyncSelect as AsyncSelect, Avatar, AvatarColor, AvatarShape, AvatarSize, AwaitingProofIcon, Backdrop, Background, Badge, BotIcon, Box, BulletIcon, Button, ButtonPreset, ButtonVariant, ButtonsGroup, Calendar, CalendarDayBody, CalendarDaysBody, CalendarDaysHeader, CalendarIcon, CalendarTask, CalendarTaskProps, CalendarWrapper, CancelButton, ChangeRequestedIcon, ChatIcon, CheckMark, CheckmarkIcon, ChevronIcon, CircleProgressIcon, ClientApprovedIcon, ClipboardIcon, ClockIcon, Col, ColPropTypes, CollapseStyled, CollapseStyledProps, CollapseWrapper, CollapseWrapperProps, Collapsible, CollapsiblePanel, CollapsiblePanelProps, CollapsiblePanelTitle, CollapsiblePanelTitleProps, CollapsiblePanels, CollapsiblePanelsProps, CollapsibleProps, ColumnSelectIcon, AddIcon as CompletedCheckmarkIcon, CouponIcon, SKUCreatableSelect as CreatableSelect, CustomDateInput, Datepicker, DatepickerPorps, DaysBodyWrapper, DaysHeaderWrapper, DefaultCalendarFooter, DefaultCalendarHeader, DefaultStar, DollarIcon, Dot, DownloadIcon, DraggableTasksCalendar, DropArea, DropAreaProps, DropDownContent, Dropdown, DropdownItem, DropdownProps, DropzoneTypes, Dropzoned, DropzonedPreviews, EditIcon, EpsIcon, ErrorBoundary, EstimateCircleIcon, EyeIcon, FeedPost, FilledChevronIcon, FolderIcon, GalleryIcon, GearIcon, GlobalStyle, Grid, GridIcon, H1, H2, H3, H4, H5, H6, HeaderWrapper, HeadlessTable, IconButton, IconButtonProps, IconDoc, InfoIcon, Input, InputIconLabel, InputIconLabelContainer, InputProps, IntegrationsIcon, Label, LabeledAsyncSelect, LabeledCheckbox, LabeledCheckboxProps, LabeledCreatableSelect, LabeledIconInput, LabeledInput, LabeledMultiProgress, LabeledProgress, LabeledRadio, LabeledRadioGroup, LabeledSelect, LabeledTextarea, LightIndicator, Link, ListIcon, Loading, LockIcon, MailIcon, MarketingStatusIcon, MenuIcon, MultiProgress, NavConnectIcon, NavFinanceIcon, NavManagementIcon, NavProdIcon, NavResourcesIcon, NavSalesIcon, NoteIcon, Number, OpportunityCircleIcon, Overlay, Padding, Page, PanelContact, PanelTileContact, PendingApprovalIcon, PercentIcon, PinIcon, Popup, PopupHeader, PopupProps, PresentationCircleIcon, Product, Progress, PromostandardsIcon, ProofReceivedIcon, ProofingCompleteIcon, Publisher, Radio, RadioIcon, RadioLabel, ReceiptLongIcon, ResponsiveTable, Row, RowPropTypes, SHARED_STYLE_MAPS, SalesArrowIcon, SalesOrderCircleIcon, SearchIcon, SKUSelect as Select, SharedStyleTypes, SharedStyles, ShowPopup, SidePanel, SimpleWindowedTable, SimpleWindowedTableProps, SimpleWindowedTableStyles, SizerCss, SizerTypes, SizerWrapper, Sparkles, Spinner, StarIcon, 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, TargetIcon, Task, TaskBody, TaskIcon, TaskLabel, TaskName, TaskProps, TasksCalendar, TasksCalendarDayBody, TasksCalendarFooter, TasksCalendarHeader, TemplateIcon, Text, TextProp, Textarea, Theme, Thermometer, TilesIcon, Toggle, ToggleLink, TrashIcon, UserIcon, UsersIcon, Wrapper, XIcon, colors, datepickerStyles, fontFamilies, fontStyles, fonts, getColor, getFontStyle, getThemeColor, getThemeFontFamily, getThemeFontSize, getThemeFontStyle, getThemeProperty, sizes, themeOptions };