@commonsku/styles 1.16.15 → 1.17.0

package/dist/index.d.ts

@@ -8,17 +8,17 @@ import { DropzoneOptions, DropzoneRootProps, DropzoneInputProps, DropzoneRef, Dr
 import * as react_select_dist_declarations_src_useAsync from 'react-select/dist/declarations/src/useAsync';
 import * as react_select_dist_declarations_src_useCreatable from 'react-select/dist/declarations/src/useCreatable';
 import * as react_select_dist_declarations_src_useStateManager from 'react-select/dist/declarations/src/useStateManager';
+import * as react_select_dist_declarations_src_filters from 'react-select/dist/declarations/src/filters';
+import * as react_select_dist_declarations_src_components from 'react-select/dist/declarations/src/components';
 import * as react_select from 'react-select';
 import { GroupBase, StylesConfig, SelectInstance } from 'react-select';
 export { components, createFilter, mergeStyles } from 'react-select';
-import * as react_select_dist_declarations_src_filters from 'react-select/dist/declarations/src/filters';
-import * as react_select_dist_declarations_src_components from 'react-select/dist/declarations/src/components';
 import * as react_select_dist_declarations_src_Select from 'react-select/dist/declarations/src/Select';
-import BaseDatePicker, { ReactDatePickerProps } from 'react-datepicker';
+import { ReactDatePickerProps } from 'react-datepicker';
 import { HeaderGroup, UseSortByColumnProps, UseTableRowProps, UseExpandedRowProps, UseGroupByRowProps, UseRowSelectRowProps, UseRowStateRowProps, Column as Column$1, SortingRule, Cell } from 'react-table';
 import { ListOnScrollProps } from 'react-window';
 
-declare type SharedStyleTypes = {
+type SharedStyleTypes = {
     pr?: boolean | number;
     pl?: boolean | number;
     pt?: boolean | number;
@@ -69,12 +69,12 @@ declare const avatarSizes: {
         fontSize: string;
     };
 };
-declare type AvatarSize = keyof typeof avatarSizes;
+type AvatarSize = keyof typeof avatarSizes;
 declare const avatarShapes: {
     square: string;
     circle: string;
 };
-declare type AvatarShape = keyof typeof avatarShapes;
+type AvatarShape = keyof typeof avatarShapes;
 declare const avatarColors: {
     teal: {
         backgroundColor: string;
@@ -97,8 +97,8 @@ declare const avatarColors: {
         textColor: string;
     };
 };
-declare type AvatarColor = keyof typeof avatarColors;
-declare type _AvatarProps = {
+type AvatarColor = keyof typeof avatarColors;
+type _AvatarProps = {
     size: AvatarSize;
     shape?: AvatarShape;
     color?: AvatarColor;
@@ -115,13 +115,13 @@ declare const Avatar: React__default.FC<Omit<_AvatarProps, 'size'> & {
     icon?: boolean;
 }>;
 
-declare type BoxProps = React__default.PropsWithChildren<{
+type BoxProps = React__default.PropsWithChildren<{
     borderless?: boolean;
     padded?: boolean;
     title?: string | React__default.ReactNode;
     controls?: React__default.ReactNode;
 } & SharedStyleTypes>;
-declare const Box: ({ title, controls, children, ...props }: BoxProps) => JSX.Element;
+declare const Box: ({ title, controls, children, ...props }: BoxProps) => React__default.JSX.Element;
 //# sourceMappingURL=Box.d.ts.map
 
 declare const Background: styled_components.StyledComponent<"div", any, {
@@ -134,23 +134,23 @@ declare const StyledDropArea: styled_components.StyledComponent<"div", any, {
     isDragReject?: boolean | undefined;
     isDragActive?: boolean | undefined;
 } & SharedStyleTypes, never>;
-declare type DropAreaProps = React__default.PropsWithChildren<{
+type DropAreaProps = React__default.PropsWithChildren<{
     placeholder?: string | React__default.ReactNode;
 } & SharedStyleTypes>;
-declare const DropArea: ({ children, placeholder, ...props }: DropAreaProps) => JSX.Element;
-declare type DropzoneTypes = {
+declare const DropArea: ({ children, placeholder, ...props }: DropAreaProps) => React__default.JSX.Element;
+type DropzoneTypes = {
     placeholder?: string | React__default.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 function Dropzoned({ placeholder, accept, showDroppedFiles, ...props }: DropzoneTypes): React__default.JSX.Element;
+declare function DropzonedPreviews({ placeholder, accept, onDrop, ...props }: DropzoneTypes): React__default.JSX.Element;
 
-declare type TSize$1 = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type TSize$1 = '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 = {
+type TSizeOffset = 'xsOffset' | 'smOffset' | 'mdOffset' | 'lgOffset' | 'xlOffset';
+type TSizeOffsetRight = 'xsOffsetRight' | 'smOffsetRight' | 'mdOffsetRight' | 'lgOffsetRight' | 'xlOffsetRight';
+type TSizeStyle = 'xsStyle' | 'smStyle' | 'mdStyle' | 'lgStyle' | 'xlStyle';
+type SizerTypes = {
     collapse?: TSize$1 | Array<TSize$1>;
     offset?: number;
     first?: string;
@@ -231,10 +231,10 @@ declare const sizes: {
         iconSize: string;
     };
 };
-declare type TSize = keyof typeof sizes;
-declare type ButtonPreset = 'edit' | 'delete' | 'add' | 'remove' | 'close' | 'drag';
-declare type ButtonVariant = 'primary' | 'secondary' | 'cta' | 'error' | 'disabled' | 'text' | 'primary-light' | 'text-error' | 'error-light' | 'text-error-light' | 'custom';
-declare type ButtonProps = {
+type TSize = keyof typeof sizes;
+type ButtonPreset = 'edit' | 'delete' | 'add' | 'remove' | 'close' | 'drag';
+type ButtonVariant = 'primary' | 'secondary' | 'cta' | 'error' | 'disabled' | 'text' | 'primary-light' | 'text-error' | 'error-light' | 'text-error-light' | 'custom';
+type ButtonProps = {
     secondary?: boolean;
     cta?: boolean;
     size?: TSize;
@@ -261,12 +261,12 @@ declare const Button: styled_components.StyledComponent<"button", any, {
     style?: CSSObject | undefined;
 } & SharedStyleTypes & SizerTypes, never>;
 declare const ButtonsGroup: styled_components.StyledComponent<"div", any, SharedStyleTypes & SizerTypes, never>;
-declare type IconFuncProps$1 = {
+type IconFuncProps$1 = {
     color: string;
     [key: string]: any;
 };
-declare type TButtonIcon = ((props: IconFuncProps$1) => React__default.ReactElement);
-declare type IconButtonProps = React__default.PropsWithChildren<ButtonProps & {
+type TButtonIcon = ((props: IconFuncProps$1) => React__default.ReactElement);
+type IconButtonProps = React__default.PropsWithChildren<ButtonProps & {
     Icon?: TButtonIcon | React__default.ReactElement<IconFuncProps$1>;
     iconProps?: {
         [key: string]: any;
@@ -319,7 +319,7 @@ declare const H6: styled_components.StyledComponent<"h6", any, {
 } & SharedStyleTypes, never>;
 //# sourceMappingURL=Headings.d.ts.map
 
-declare type ImgProps = {
+type ImgProps = {
     src?: string;
     alt?: string;
     max_attempts?: number;
@@ -327,7 +327,7 @@ declare type ImgProps = {
     onRetry?: OnErrorEventHandler;
     onFailed?: OnErrorEventHandler;
 } & React__default.DetailedHTMLProps<React__default.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>;
-declare const Img: React__default.ForwardRefExoticComponent<Pick<ImgProps, "max_attempts" | "attempt_interval" | "onRetry" | "onFailed" | "key" | keyof React__default.ImgHTMLAttributes<HTMLImageElement>> & React__default.RefAttributes<HTMLImageElement>>;
+declare const Img: React__default.ForwardRefExoticComponent<Omit<ImgProps, "ref"> & React__default.RefAttributes<HTMLImageElement>>;
 //# sourceMappingURL=Img.d.ts.map
 
 declare const iconSize: {
@@ -362,9 +362,9 @@ declare const iconSize: {
         viewBox: string;
     };
 };
-declare type TIconSizeObj = typeof iconSize;
-declare type TIconSize = keyof typeof iconSize;
-declare type BaseSVGIconProps = {
+type TIconSizeObj = typeof iconSize;
+type TIconSize = keyof typeof iconSize;
+type BaseSVGIconProps = {
     size?: TIconSize;
     width?: string | number;
     height?: string | number;
@@ -373,7 +373,7 @@ declare type BaseSVGIconProps = {
     iconSizes?: TIconSizeObj;
     disabled?: boolean;
 } & SharedStyleTypes;
-declare type SVGIconProps = React.SVGAttributes<SVGElement> & BaseSVGIconProps;
+type SVGIconProps = React.SVGAttributes<SVGElement> & BaseSVGIconProps;
 declare const SVG: styled_components.StyledComponent<"svg", any, {
     size?: "tiny" | "small" | "medium" | "large" | "huge" | "default" | undefined;
     width?: string | number | undefined;
@@ -415,16 +415,16 @@ declare const SVG: styled_components.StyledComponent<"svg", any, {
     disabled?: boolean | undefined;
 } & SharedStyleTypes, never>;
 
-declare type RadioIconProps = SVGIconProps & {
+type RadioIconProps = SVGIconProps & {
     selected?: boolean;
     hover?: boolean;
     hoverColor?: string;
     disabled?: boolean;
     disabledColor?: string;
 };
-declare function RadioIcon({ color, hoverColor, disabledColor, size, hover, selected, disabled, altText, ...props }: RadioIconProps): JSX.Element;
+declare function RadioIcon({ color, hoverColor, disabledColor, size, hover, selected, disabled, altText, ...props }: RadioIconProps): React__default.JSX.Element;
 
-declare type BaseCheckboxIconProps = {
+type BaseCheckboxIconProps = {
     selected?: boolean;
     hover?: boolean;
     hoverColor?: string;
@@ -432,17 +432,17 @@ declare type BaseCheckboxIconProps = {
     disabledColor?: string;
     indeterminate?: boolean;
 };
-declare type CheckboxIconProps = SVGIconProps & BaseCheckboxIconProps;
-declare function CheckboxIcon({ color, hoverColor, disabledColor, size, hover, selected, disabled, indeterminate, altText, ...props }: CheckboxIconProps): JSX.Element;
+type CheckboxIconProps = SVGIconProps & BaseCheckboxIconProps;
+declare function CheckboxIcon({ color, hoverColor, disabledColor, size, hover, selected, disabled, indeterminate, altText, ...props }: CheckboxIconProps): React__default.JSX.Element;
 
-declare type CommonInputProp = {
+type CommonInputProp = {
     noMargin?: boolean;
     error?: boolean;
 };
-declare type BaseInputProps = CommonInputProp & {
+type BaseInputProps = CommonInputProp & {
     hasIcon?: boolean;
 } & SharedStyleTypes;
-declare type InputProps = BaseInputProps & React__default.InputHTMLAttributes<HTMLInputElement>;
+type InputProps = BaseInputProps & React__default.InputHTMLAttributes<HTMLInputElement>;
 declare const InputIconLabel: styled_components.StyledComponent<"div", any, CommonInputProp & {
     isActive?: boolean | undefined;
     isDisabled?: boolean | undefined;
@@ -479,10 +479,10 @@ declare const CheckboxLabel: styled_components.StyledComponent<"label", any, {
 declare const RadioLabel: styled_components.StyledComponent<"label", any, {
     disabled?: boolean | undefined;
 }, never>;
-declare type BaseRadioProps = {
+type BaseRadioProps = {
     isHovering?: boolean;
 };
-declare type RadioProps = React__default.InputHTMLAttributes<HTMLInputElement> & BaseRadioProps;
+type RadioProps = React__default.InputHTMLAttributes<HTMLInputElement> & BaseRadioProps;
 declare const Radio: styled_components.StyledComponent<"input", any, BaseRadioProps, never>;
 declare const CheckMark: styled_components.StyledComponent<"span", any, {
     checked?: boolean | undefined;
@@ -494,7 +494,7 @@ declare const Dot: styled_components.StyledComponent<"span", any, {
     isHovering?: boolean | undefined;
     disabled?: boolean | undefined;
 } & SharedStyleTypes, never>;
-declare type LabeledRadioProps = RadioProps & {
+type LabeledRadioProps = RadioProps & {
     label: string;
     labelStyle?: React__default.CSSProperties;
     radioIconStyle?: React__default.CSSProperties;
@@ -521,7 +521,7 @@ declare const LabeledRadioInButtonGroup: React__default.FC<LabeledRadioProps & {
         value: any;
     }];
 }>;
-declare type LabeledCheckboxProps = {
+type LabeledCheckboxProps = {
     checked?: boolean;
     disabled?: boolean;
     label: string | React__default.ReactNode;
@@ -547,19 +547,19 @@ declare const Label: styled_components.StyledComponent<"label", any, {
 declare const Padding: styled_components.StyledComponent<"div", any, SharedStyleTypes, never>;
 //# sourceMappingURL=Padding.d.ts.map
 
-declare function Page(props: React__default.PropsWithChildren<SharedStyleTypes>): JSX.Element;
+declare function Page(props: React__default.PropsWithChildren<SharedStyleTypes>): React__default.JSX.Element;
 //# sourceMappingURL=Page.d.ts.map
 
-declare type ProgressBarProps = React__default.PropsWithChildren<{
+type ProgressBarProps = React__default.PropsWithChildren<{
     value: number;
     max: number;
     error?: string;
 } & SharedStyleTypes>;
-declare const Progress: (props: ProgressBarProps) => JSX.Element;
-declare const LabeledProgress: (props: ProgressBarProps) => JSX.Element;
+declare const Progress: (props: ProgressBarProps) => React__default.JSX.Element;
+declare const LabeledProgress: (props: ProgressBarProps) => React__default.JSX.Element;
 //# sourceMappingURL=Progress.d.ts.map
 
-declare type AdditionalSKUSelectProps = {
+type AdditionalSKUSelectProps = {
     noMargin?: boolean;
     error?: boolean;
     menuRelative?: boolean;
@@ -577,11 +577,12 @@ declare type AdditionalSKUSelectProps = {
     valueContainerStyles?: React__default.CSSProperties;
     containerStyles?: React__default.CSSProperties;
 };
-declare const SKUSelect: React__default.ForwardRefExoticComponent<AdditionalSKUSelectProps & Omit<Pick<react_select_dist_declarations_src_Select.Props<unknown, boolean, GroupBase<unknown>>, "aria-errormessage" | "aria-invalid" | "aria-label" | "aria-labelledby" | "ariaLiveMessages" | "autoFocus" | "className" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "id" | "inputValue" | "inputId" | "instanceId" | "isClearable" | "isOptionSelected" | "menuPortalTarget" | "name" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom" | "theme" | "value" | "form"> & {
+declare const SKUSelect: React__default.ForwardRefExoticComponent<AdditionalSKUSelectProps & Omit<Pick<react_select_dist_declarations_src_Select.Props<unknown, boolean, GroupBase<unknown>>, "aria-errormessage" | "aria-invalid" | "aria-label" | "aria-labelledby" | "ariaLiveMessages" | "autoFocus" | "className" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "id" | "inputValue" | "inputId" | "instanceId" | "isClearable" | "isOptionSelected" | "menuPortalTarget" | "name" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom" | "theme" | "value" | "form" | "required"> & {
     'aria-live'?: "off" | "assertive" | "polite" | undefined;
     backspaceRemovesValue?: boolean | undefined;
     blurInputOnSelect?: boolean | undefined;
     captureMenuScroll?: boolean | undefined;
+    classNames?: react_select.ClassNamesConfig<unknown, boolean, GroupBase<unknown>> | undefined;
     closeMenuOnSelect?: boolean | undefined;
     closeMenuOnScroll?: boolean | ((event: Event) => boolean) | undefined;
     components?: Partial<react_select_dist_declarations_src_components.SelectComponents<unknown, boolean, GroupBase<unknown>>> | undefined;
@@ -621,11 +622,13 @@ declare const SKUSelect: React__default.ForwardRefExoticComponent<AdditionalSKUS
     styles?: StylesConfig<unknown, boolean, GroupBase<unknown>> | undefined;
     tabIndex?: number | undefined;
     tabSelectsValue?: boolean | undefined;
-} & {}, "inputValue" | "menuIsOpen" | "onChange" | "onInputChange" | "onMenuOpen" | "onMenuClose" | "value"> & Partial<Pick<react_select_dist_declarations_src_Select.Props<unknown, boolean, GroupBase<unknown>>, "aria-errormessage" | "aria-invalid" | "aria-label" | "aria-labelledby" | "ariaLiveMessages" | "autoFocus" | "className" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "id" | "inputValue" | "inputId" | "instanceId" | "isClearable" | "isOptionSelected" | "menuPortalTarget" | "name" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom" | "theme" | "value" | "form"> & {
+    unstyled?: boolean | undefined;
+} & {}, "inputValue" | "menuIsOpen" | "onChange" | "onInputChange" | "onMenuOpen" | "onMenuClose" | "value"> & Partial<Pick<react_select_dist_declarations_src_Select.Props<unknown, boolean, GroupBase<unknown>>, "aria-errormessage" | "aria-invalid" | "aria-label" | "aria-labelledby" | "ariaLiveMessages" | "autoFocus" | "className" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "id" | "inputValue" | "inputId" | "instanceId" | "isClearable" | "isOptionSelected" | "menuPortalTarget" | "name" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom" | "theme" | "value" | "form" | "required"> & {
     'aria-live'?: "off" | "assertive" | "polite" | undefined;
     backspaceRemovesValue?: boolean | undefined;
     blurInputOnSelect?: boolean | undefined;
     captureMenuScroll?: boolean | undefined;
+    classNames?: react_select.ClassNamesConfig<unknown, boolean, GroupBase<unknown>> | undefined;
     closeMenuOnSelect?: boolean | undefined;
     closeMenuOnScroll?: boolean | ((event: Event) => boolean) | undefined;
     components?: Partial<react_select_dist_declarations_src_components.SelectComponents<unknown, boolean, GroupBase<unknown>>> | undefined;
@@ -665,12 +668,14 @@ declare const SKUSelect: React__default.ForwardRefExoticComponent<AdditionalSKUS
     styles?: StylesConfig<unknown, boolean, GroupBase<unknown>> | undefined;
     tabIndex?: number | undefined;
     tabSelectsValue?: boolean | undefined;
+    unstyled?: boolean | undefined;
 } & {}> & react_select_dist_declarations_src_useStateManager.StateManagerAdditionalProps<unknown> & React__default.RefAttributes<SelectInstance<unknown, boolean, GroupBase<unknown>>>>;
-declare const LabeledSelect: React__default.ForwardRefExoticComponent<AdditionalSKUSelectProps & Omit<Pick<react_select_dist_declarations_src_Select.Props<unknown, boolean, GroupBase<unknown>>, "aria-errormessage" | "aria-invalid" | "aria-label" | "aria-labelledby" | "ariaLiveMessages" | "autoFocus" | "className" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "id" | "inputValue" | "inputId" | "instanceId" | "isClearable" | "isOptionSelected" | "menuPortalTarget" | "name" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom" | "theme" | "value" | "form"> & {
+declare const LabeledSelect: React__default.ForwardRefExoticComponent<AdditionalSKUSelectProps & Omit<Pick<react_select_dist_declarations_src_Select.Props<unknown, boolean, GroupBase<unknown>>, "aria-errormessage" | "aria-invalid" | "aria-label" | "aria-labelledby" | "ariaLiveMessages" | "autoFocus" | "className" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "id" | "inputValue" | "inputId" | "instanceId" | "isClearable" | "isOptionSelected" | "menuPortalTarget" | "name" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom" | "theme" | "value" | "form" | "required"> & {
     'aria-live'?: "off" | "assertive" | "polite" | undefined;
     backspaceRemovesValue?: boolean | undefined;
     blurInputOnSelect?: boolean | undefined;
     captureMenuScroll?: boolean | undefined;
+    classNames?: react_select.ClassNamesConfig<unknown, boolean, GroupBase<unknown>> | undefined;
     closeMenuOnSelect?: boolean | undefined;
     closeMenuOnScroll?: boolean | ((event: Event) => boolean) | undefined;
     components?: Partial<react_select_dist_declarations_src_components.SelectComponents<unknown, boolean, GroupBase<unknown>>> | undefined;
@@ -710,11 +715,13 @@ declare const LabeledSelect: React__default.ForwardRefExoticComponent<Additional
     styles?: StylesConfig<unknown, boolean, GroupBase<unknown>> | undefined;
     tabIndex?: number | undefined;
     tabSelectsValue?: boolean | undefined;
-} & {}, "inputValue" | "menuIsOpen" | "onChange" | "onInputChange" | "onMenuOpen" | "onMenuClose" | "value"> & Partial<Pick<react_select_dist_declarations_src_Select.Props<unknown, boolean, GroupBase<unknown>>, "aria-errormessage" | "aria-invalid" | "aria-label" | "aria-labelledby" | "ariaLiveMessages" | "autoFocus" | "className" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "id" | "inputValue" | "inputId" | "instanceId" | "isClearable" | "isOptionSelected" | "menuPortalTarget" | "name" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom" | "theme" | "value" | "form"> & {
+    unstyled?: boolean | undefined;
+} & {}, "inputValue" | "menuIsOpen" | "onChange" | "onInputChange" | "onMenuOpen" | "onMenuClose" | "value"> & Partial<Pick<react_select_dist_declarations_src_Select.Props<unknown, boolean, GroupBase<unknown>>, "aria-errormessage" | "aria-invalid" | "aria-label" | "aria-labelledby" | "ariaLiveMessages" | "autoFocus" | "className" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "id" | "inputValue" | "inputId" | "instanceId" | "isClearable" | "isOptionSelected" | "menuPortalTarget" | "name" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom" | "theme" | "value" | "form" | "required"> & {
     'aria-live'?: "off" | "assertive" | "polite" | undefined;
     backspaceRemovesValue?: boolean | undefined;
     blurInputOnSelect?: boolean | undefined;
     captureMenuScroll?: boolean | undefined;
+    classNames?: react_select.ClassNamesConfig<unknown, boolean, GroupBase<unknown>> | undefined;
     closeMenuOnSelect?: boolean | undefined;
     closeMenuOnScroll?: boolean | ((event: Event) => boolean) | undefined;
     components?: Partial<react_select_dist_declarations_src_components.SelectComponents<unknown, boolean, GroupBase<unknown>>> | undefined;
@@ -754,17 +761,19 @@ declare const LabeledSelect: React__default.ForwardRefExoticComponent<Additional
     styles?: StylesConfig<unknown, boolean, GroupBase<unknown>> | undefined;
     tabIndex?: number | undefined;
     tabSelectsValue?: boolean | undefined;
+    unstyled?: boolean | undefined;
 } & {}> & react_select_dist_declarations_src_useStateManager.StateManagerAdditionalProps<unknown> & {
     parentStyle?: React__default.CSSProperties | undefined;
     labelStyle?: React__default.CSSProperties | undefined;
     label?: string | undefined;
     required?: boolean | undefined;
 } & React__default.RefAttributes<SelectInstance<unknown, boolean, GroupBase<unknown>>>>;
-declare const SKUCreatableSelect: React__default.ForwardRefExoticComponent<AdditionalSKUSelectProps & Omit<Pick<react_select_dist_declarations_src_Select.Props<unknown, false, GroupBase<unknown>>, "aria-errormessage" | "aria-invalid" | "aria-label" | "aria-labelledby" | "ariaLiveMessages" | "autoFocus" | "className" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "id" | "inputValue" | "inputId" | "instanceId" | "isClearable" | "isOptionSelected" | "menuPortalTarget" | "name" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom" | "theme" | "value" | "form"> & {
+declare const SKUCreatableSelect: React__default.ForwardRefExoticComponent<AdditionalSKUSelectProps & Omit<Pick<react_select_dist_declarations_src_Select.Props<unknown, false, GroupBase<unknown>>, "aria-errormessage" | "aria-invalid" | "aria-label" | "aria-labelledby" | "ariaLiveMessages" | "autoFocus" | "className" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "id" | "inputValue" | "inputId" | "instanceId" | "isClearable" | "isOptionSelected" | "menuPortalTarget" | "name" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom" | "theme" | "value" | "form" | "required"> & {
     'aria-live'?: "off" | "assertive" | "polite" | undefined;
     backspaceRemovesValue?: boolean | undefined;
     blurInputOnSelect?: boolean | undefined;
     captureMenuScroll?: boolean | undefined;
+    classNames?: react_select.ClassNamesConfig<unknown, false, GroupBase<unknown>> | undefined;
     closeMenuOnSelect?: boolean | undefined;
     closeMenuOnScroll?: boolean | ((event: Event) => boolean) | undefined;
     components?: Partial<react_select_dist_declarations_src_components.SelectComponents<unknown, false, GroupBase<unknown>>> | undefined;
@@ -804,11 +813,13 @@ declare const SKUCreatableSelect: React__default.ForwardRefExoticComponent<Addit
     styles?: StylesConfig<unknown, false, GroupBase<unknown>> | undefined;
     tabIndex?: number | undefined;
     tabSelectsValue?: boolean | undefined;
-} & {}, "inputValue" | "menuIsOpen" | "onChange" | "onInputChange" | "onMenuOpen" | "onMenuClose" | "value"> & Partial<Pick<react_select_dist_declarations_src_Select.Props<unknown, false, GroupBase<unknown>>, "aria-errormessage" | "aria-invalid" | "aria-label" | "aria-labelledby" | "ariaLiveMessages" | "autoFocus" | "className" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "id" | "inputValue" | "inputId" | "instanceId" | "isClearable" | "isOptionSelected" | "menuPortalTarget" | "name" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom" | "theme" | "value" | "form"> & {
+    unstyled?: boolean | undefined;
+} & {}, "inputValue" | "menuIsOpen" | "onChange" | "onInputChange" | "onMenuOpen" | "onMenuClose" | "value"> & Partial<Pick<react_select_dist_declarations_src_Select.Props<unknown, false, GroupBase<unknown>>, "aria-errormessage" | "aria-invalid" | "aria-label" | "aria-labelledby" | "ariaLiveMessages" | "autoFocus" | "className" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "id" | "inputValue" | "inputId" | "instanceId" | "isClearable" | "isOptionSelected" | "menuPortalTarget" | "name" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom" | "theme" | "value" | "form" | "required"> & {
     'aria-live'?: "off" | "assertive" | "polite" | undefined;
     backspaceRemovesValue?: boolean | undefined;
     blurInputOnSelect?: boolean | undefined;
     captureMenuScroll?: boolean | undefined;
+    classNames?: react_select.ClassNamesConfig<unknown, false, GroupBase<unknown>> | undefined;
     closeMenuOnSelect?: boolean | undefined;
     closeMenuOnScroll?: boolean | ((event: Event) => boolean) | undefined;
     components?: Partial<react_select_dist_declarations_src_components.SelectComponents<unknown, false, GroupBase<unknown>>> | undefined;
@@ -848,12 +859,14 @@ declare const SKUCreatableSelect: React__default.ForwardRefExoticComponent<Addit
     styles?: StylesConfig<unknown, false, GroupBase<unknown>> | undefined;
     tabIndex?: number | undefined;
     tabSelectsValue?: boolean | undefined;
+    unstyled?: boolean | undefined;
 } & {}> & react_select_dist_declarations_src_useStateManager.StateManagerAdditionalProps<unknown> & react_select_dist_declarations_src_useCreatable.CreatableAdditionalProps<unknown, GroupBase<unknown>> & React__default.RefAttributes<SelectInstance<unknown, false, GroupBase<unknown>>>>;
-declare const LabeledCreatableSelect: React__default.ForwardRefExoticComponent<AdditionalSKUSelectProps & Omit<Pick<react_select_dist_declarations_src_Select.Props<unknown, false, GroupBase<unknown>>, "aria-errormessage" | "aria-invalid" | "aria-label" | "aria-labelledby" | "ariaLiveMessages" | "autoFocus" | "className" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "id" | "inputValue" | "inputId" | "instanceId" | "isClearable" | "isOptionSelected" | "menuPortalTarget" | "name" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom" | "theme" | "value" | "form"> & {
+declare const LabeledCreatableSelect: React__default.ForwardRefExoticComponent<AdditionalSKUSelectProps & Omit<Pick<react_select_dist_declarations_src_Select.Props<unknown, false, GroupBase<unknown>>, "aria-errormessage" | "aria-invalid" | "aria-label" | "aria-labelledby" | "ariaLiveMessages" | "autoFocus" | "className" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "id" | "inputValue" | "inputId" | "instanceId" | "isClearable" | "isOptionSelected" | "menuPortalTarget" | "name" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom" | "theme" | "value" | "form" | "required"> & {
     'aria-live'?: "off" | "assertive" | "polite" | undefined;
     backspaceRemovesValue?: boolean | undefined;
     blurInputOnSelect?: boolean | undefined;
     captureMenuScroll?: boolean | undefined;
+    classNames?: react_select.ClassNamesConfig<unknown, false, GroupBase<unknown>> | undefined;
     closeMenuOnSelect?: boolean | undefined;
     closeMenuOnScroll?: boolean | ((event: Event) => boolean) | undefined;
     components?: Partial<react_select_dist_declarations_src_components.SelectComponents<unknown, false, GroupBase<unknown>>> | undefined;
@@ -893,11 +906,13 @@ declare const LabeledCreatableSelect: React__default.ForwardRefExoticComponent<A
     styles?: StylesConfig<unknown, false, GroupBase<unknown>> | undefined;
     tabIndex?: number | undefined;
     tabSelectsValue?: boolean | undefined;
-} & {}, "inputValue" | "menuIsOpen" | "onChange" | "onInputChange" | "onMenuOpen" | "onMenuClose" | "value"> & Partial<Pick<react_select_dist_declarations_src_Select.Props<unknown, false, GroupBase<unknown>>, "aria-errormessage" | "aria-invalid" | "aria-label" | "aria-labelledby" | "ariaLiveMessages" | "autoFocus" | "className" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "id" | "inputValue" | "inputId" | "instanceId" | "isClearable" | "isOptionSelected" | "menuPortalTarget" | "name" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom" | "theme" | "value" | "form"> & {
+    unstyled?: boolean | undefined;
+} & {}, "inputValue" | "menuIsOpen" | "onChange" | "onInputChange" | "onMenuOpen" | "onMenuClose" | "value"> & Partial<Pick<react_select_dist_declarations_src_Select.Props<unknown, false, GroupBase<unknown>>, "aria-errormessage" | "aria-invalid" | "aria-label" | "aria-labelledby" | "ariaLiveMessages" | "autoFocus" | "className" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "id" | "inputValue" | "inputId" | "instanceId" | "isClearable" | "isOptionSelected" | "menuPortalTarget" | "name" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom" | "theme" | "value" | "form" | "required"> & {
     'aria-live'?: "off" | "assertive" | "polite" | undefined;
     backspaceRemovesValue?: boolean | undefined;
     blurInputOnSelect?: boolean | undefined;
     captureMenuScroll?: boolean | undefined;
+    classNames?: react_select.ClassNamesConfig<unknown, false, GroupBase<unknown>> | undefined;
     closeMenuOnSelect?: boolean | undefined;
     closeMenuOnScroll?: boolean | ((event: Event) => boolean) | undefined;
     components?: Partial<react_select_dist_declarations_src_components.SelectComponents<unknown, false, GroupBase<unknown>>> | undefined;
@@ -937,17 +952,19 @@ declare const LabeledCreatableSelect: React__default.ForwardRefExoticComponent<A
     styles?: StylesConfig<unknown, false, GroupBase<unknown>> | undefined;
     tabIndex?: number | undefined;
     tabSelectsValue?: boolean | undefined;
+    unstyled?: boolean | undefined;
 } & {}> & react_select_dist_declarations_src_useStateManager.StateManagerAdditionalProps<unknown> & react_select_dist_declarations_src_useCreatable.CreatableAdditionalProps<unknown, GroupBase<unknown>> & {
     parentStyle?: React__default.CSSProperties | undefined;
     labelStyle?: React__default.CSSProperties | undefined;
     label?: string | undefined;
     required?: boolean | undefined;
 } & React__default.RefAttributes<SelectInstance<unknown, false, GroupBase<unknown>>>>;
-declare const SKUAsyncSelect: React__default.ForwardRefExoticComponent<AdditionalSKUSelectProps & Omit<Pick<react_select_dist_declarations_src_Select.Props<unknown, false, GroupBase<unknown>>, "aria-errormessage" | "aria-invalid" | "aria-label" | "aria-labelledby" | "ariaLiveMessages" | "autoFocus" | "className" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "id" | "inputValue" | "inputId" | "instanceId" | "isClearable" | "isOptionSelected" | "menuPortalTarget" | "name" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom" | "theme" | "value" | "form"> & {
+declare const SKUAsyncSelect: React__default.ForwardRefExoticComponent<AdditionalSKUSelectProps & Omit<Pick<react_select_dist_declarations_src_Select.Props<unknown, false, GroupBase<unknown>>, "aria-errormessage" | "aria-invalid" | "aria-label" | "aria-labelledby" | "ariaLiveMessages" | "autoFocus" | "className" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "id" | "inputValue" | "inputId" | "instanceId" | "isClearable" | "isOptionSelected" | "menuPortalTarget" | "name" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom" | "theme" | "value" | "form" | "required"> & {
     'aria-live'?: "off" | "assertive" | "polite" | undefined;
     backspaceRemovesValue?: boolean | undefined;
     blurInputOnSelect?: boolean | undefined;
     captureMenuScroll?: boolean | undefined;
+    classNames?: react_select.ClassNamesConfig<unknown, false, GroupBase<unknown>> | undefined;
     closeMenuOnSelect?: boolean | undefined;
     closeMenuOnScroll?: boolean | ((event: Event) => boolean) | undefined;
     components?: Partial<react_select_dist_declarations_src_components.SelectComponents<unknown, false, GroupBase<unknown>>> | undefined;
@@ -987,11 +1004,13 @@ declare const SKUAsyncSelect: React__default.ForwardRefExoticComponent<Additiona
     styles?: StylesConfig<unknown, false, GroupBase<unknown>> | undefined;
     tabIndex?: number | undefined;
     tabSelectsValue?: boolean | undefined;
-} & {}, "inputValue" | "menuIsOpen" | "onChange" | "onInputChange" | "onMenuOpen" | "onMenuClose" | "value"> & Partial<Pick<react_select_dist_declarations_src_Select.Props<unknown, false, GroupBase<unknown>>, "aria-errormessage" | "aria-invalid" | "aria-label" | "aria-labelledby" | "ariaLiveMessages" | "autoFocus" | "className" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "id" | "inputValue" | "inputId" | "instanceId" | "isClearable" | "isOptionSelected" | "menuPortalTarget" | "name" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom" | "theme" | "value" | "form"> & {
+    unstyled?: boolean | undefined;
+} & {}, "inputValue" | "menuIsOpen" | "onChange" | "onInputChange" | "onMenuOpen" | "onMenuClose" | "value"> & Partial<Pick<react_select_dist_declarations_src_Select.Props<unknown, false, GroupBase<unknown>>, "aria-errormessage" | "aria-invalid" | "aria-label" | "aria-labelledby" | "ariaLiveMessages" | "autoFocus" | "className" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "id" | "inputValue" | "inputId" | "instanceId" | "isClearable" | "isOptionSelected" | "menuPortalTarget" | "name" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom" | "theme" | "value" | "form" | "required"> & {
     'aria-live'?: "off" | "assertive" | "polite" | undefined;
     backspaceRemovesValue?: boolean | undefined;
     blurInputOnSelect?: boolean | undefined;
     captureMenuScroll?: boolean | undefined;
+    classNames?: react_select.ClassNamesConfig<unknown, false, GroupBase<unknown>> | undefined;
     closeMenuOnSelect?: boolean | undefined;
     closeMenuOnScroll?: boolean | ((event: Event) => boolean) | undefined;
     components?: Partial<react_select_dist_declarations_src_components.SelectComponents<unknown, false, GroupBase<unknown>>> | undefined;
@@ -1031,12 +1050,14 @@ declare const SKUAsyncSelect: React__default.ForwardRefExoticComponent<Additiona
     styles?: StylesConfig<unknown, false, GroupBase<unknown>> | undefined;
     tabIndex?: number | undefined;
     tabSelectsValue?: boolean | undefined;
+    unstyled?: boolean | undefined;
 } & {}> & react_select_dist_declarations_src_useStateManager.StateManagerAdditionalProps<unknown> & react_select_dist_declarations_src_useAsync.AsyncAdditionalProps<unknown, GroupBase<unknown>> & React__default.RefAttributes<SelectInstance<unknown, false, GroupBase<unknown>>>>;
-declare const LabeledAsyncSelect: React__default.ForwardRefExoticComponent<AdditionalSKUSelectProps & Omit<Pick<react_select_dist_declarations_src_Select.Props<unknown, false, GroupBase<unknown>>, "aria-errormessage" | "aria-invalid" | "aria-label" | "aria-labelledby" | "ariaLiveMessages" | "autoFocus" | "className" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "id" | "inputValue" | "inputId" | "instanceId" | "isClearable" | "isOptionSelected" | "menuPortalTarget" | "name" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom" | "theme" | "value" | "form"> & {
+declare const LabeledAsyncSelect: React__default.ForwardRefExoticComponent<AdditionalSKUSelectProps & Omit<Pick<react_select_dist_declarations_src_Select.Props<unknown, false, GroupBase<unknown>>, "aria-errormessage" | "aria-invalid" | "aria-label" | "aria-labelledby" | "ariaLiveMessages" | "autoFocus" | "className" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "id" | "inputValue" | "inputId" | "instanceId" | "isClearable" | "isOptionSelected" | "menuPortalTarget" | "name" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom" | "theme" | "value" | "form" | "required"> & {
     'aria-live'?: "off" | "assertive" | "polite" | undefined;
     backspaceRemovesValue?: boolean | undefined;
     blurInputOnSelect?: boolean | undefined;
     captureMenuScroll?: boolean | undefined;
+    classNames?: react_select.ClassNamesConfig<unknown, false, GroupBase<unknown>> | undefined;
     closeMenuOnSelect?: boolean | undefined;
     closeMenuOnScroll?: boolean | ((event: Event) => boolean) | undefined;
     components?: Partial<react_select_dist_declarations_src_components.SelectComponents<unknown, false, GroupBase<unknown>>> | undefined;
@@ -1076,11 +1097,13 @@ declare const LabeledAsyncSelect: React__default.ForwardRefExoticComponent<Addit
     styles?: StylesConfig<unknown, false, GroupBase<unknown>> | undefined;
     tabIndex?: number | undefined;
     tabSelectsValue?: boolean | undefined;
-} & {}, "inputValue" | "menuIsOpen" | "onChange" | "onInputChange" | "onMenuOpen" | "onMenuClose" | "value"> & Partial<Pick<react_select_dist_declarations_src_Select.Props<unknown, false, GroupBase<unknown>>, "aria-errormessage" | "aria-invalid" | "aria-label" | "aria-labelledby" | "ariaLiveMessages" | "autoFocus" | "className" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "id" | "inputValue" | "inputId" | "instanceId" | "isClearable" | "isOptionSelected" | "menuPortalTarget" | "name" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom" | "theme" | "value" | "form"> & {
+    unstyled?: boolean | undefined;
+} & {}, "inputValue" | "menuIsOpen" | "onChange" | "onInputChange" | "onMenuOpen" | "onMenuClose" | "value"> & Partial<Pick<react_select_dist_declarations_src_Select.Props<unknown, false, GroupBase<unknown>>, "aria-errormessage" | "aria-invalid" | "aria-label" | "aria-labelledby" | "ariaLiveMessages" | "autoFocus" | "className" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "id" | "inputValue" | "inputId" | "instanceId" | "isClearable" | "isOptionSelected" | "menuPortalTarget" | "name" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom" | "theme" | "value" | "form" | "required"> & {
     'aria-live'?: "off" | "assertive" | "polite" | undefined;
     backspaceRemovesValue?: boolean | undefined;
     blurInputOnSelect?: boolean | undefined;
     captureMenuScroll?: boolean | undefined;
+    classNames?: react_select.ClassNamesConfig<unknown, false, GroupBase<unknown>> | undefined;
     closeMenuOnSelect?: boolean | undefined;
     closeMenuOnScroll?: boolean | ((event: Event) => boolean) | undefined;
     components?: Partial<react_select_dist_declarations_src_components.SelectComponents<unknown, false, GroupBase<unknown>>> | undefined;
@@ -1120,6 +1143,7 @@ declare const LabeledAsyncSelect: React__default.ForwardRefExoticComponent<Addit
     styles?: StylesConfig<unknown, false, GroupBase<unknown>> | undefined;
     tabIndex?: number | undefined;
     tabSelectsValue?: boolean | undefined;
+    unstyled?: boolean | undefined;
 } & {}> & react_select_dist_declarations_src_useStateManager.StateManagerAdditionalProps<unknown> & react_select_dist_declarations_src_useAsync.AsyncAdditionalProps<unknown, GroupBase<unknown>> & {
     parentStyle?: React__default.CSSProperties | undefined;
     labelStyle?: React__default.CSSProperties | undefined;
@@ -1128,7 +1152,7 @@ declare const LabeledAsyncSelect: React__default.ForwardRefExoticComponent<Addit
 } & React__default.RefAttributes<SelectInstance<unknown, false, GroupBase<unknown>>>>;
 //# sourceMappingURL=Select.d.ts.map
 
-declare type SidePanelType = {
+type SidePanelType = {
     animationDuration?: number;
     visible?: boolean;
     from?: "left" | "right" | "bottom" | "top";
@@ -1143,15 +1167,15 @@ declare const SidePanel: ({ from, visible, animationDuration, fullWidthTitle, bo
     fullWidthTitle?: boolean | undefined;
     backdrop?: boolean | undefined;
     bodyScrollable?: boolean | undefined;
-} & SidePanelType & SharedStyleTypes & SizerTypes>) => JSX.Element;
+} & SidePanelType & SharedStyleTypes & SizerTypes>) => React__default.JSX.Element;
 declare const PanelContact: ({ avatar, name, position, email, ...props }: {
     name: string;
     position?: string | undefined;
     email?: string | undefined;
     phone?: string | undefined;
     avatar?: React__default.ReactNode;
-} & SizerTypes) => JSX.Element;
-declare type PhoneType = {
+} & SizerTypes) => React__default.JSX.Element;
+type PhoneType = {
     phone_number?: string;
     phone_type?: string;
     phone_extension?: string;
@@ -1162,7 +1186,7 @@ declare const PanelTileContact: ({ avatar, name, position, email, phones, ...pro
     email?: string | undefined;
     phones?: PhoneType[] | undefined;
     avatar?: React__default.ReactNode;
-} & SizerTypes) => JSX.Element;
+} & SizerTypes) => React__default.JSX.Element;
 
 declare const Table: styled_components.StyledComponent<"table", any, {
     cellPadding: 0;
@@ -1186,13 +1210,13 @@ declare const ResponsiveTable: ({ parentProps, children, ...props }: React__defa
         [key: string]: any;
         style?: object | undefined;
     } | undefined;
-} & SharedStyleTypes>) => JSX.Element;
+} & SharedStyleTypes>) => React__default.JSX.Element;
 declare const THSorted: ({ children, order, iconHeight, iconStyles, hideIconOnMobile, ...props }: React__default.PropsWithChildren<{
     order?: string | undefined;
     iconHeight?: number | undefined;
     iconStyles?: object | undefined;
     hideIconOnMobile?: boolean | undefined;
-}>) => JSX.Element;
+}>) => React__default.JSX.Element;
 //# sourceMappingURL=Table.d.ts.map
 
 declare const GridTableContainer: styled_components.StyledComponent<"div", any, {
@@ -1211,20 +1235,20 @@ declare const GridCell: styled_components.StyledComponent<"div", any, {
     header?: boolean | undefined;
     centerContent?: boolean | undefined;
 } & SharedStyleTypes, never>;
-declare type TValue = string | number | object;
-declare type TransformFunction = (value: any | {
+type TValue = string | number | object;
+type TransformFunction = (value: any | {
     label: string;
     value: string;
 }) => TValue;
-declare type TChild = React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>>;
-declare type ColumnProps = {
+type TChild = React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>>;
+type ColumnProps = {
     name: string;
     title: React__default.ReactNode;
     children: TChild;
     centerContent?: boolean;
     transform?: TransformFunction;
 };
-declare type GridTableProps = {
+type GridTableProps = {
     data: {
         id: number | string;
         [key: string]: any;
@@ -1243,8 +1267,8 @@ declare type GridTableProps = {
     gridRowGap?: string;
     gridColumnGap?: string;
 } & SharedStyleTypes & SizerTypes;
-declare const Column: ({ name, title, children, centerContent, transform, }: ColumnProps) => JSX.Element;
-declare function GridTable({ data, idField, onUpdate, onDelete, onAdd, onSort, validate, children, gridTemplateRows, gridTemplateColumns, gridRowGap, gridColumnGap, ...props }: GridTableProps): JSX.Element;
+declare const Column: ({ name, title, children, centerContent, transform, }: ColumnProps) => React__default.JSX.Element;
+declare function GridTable({ data, idField, onUpdate, onDelete, onAdd, onSort, validate, children, gridTemplateRows, gridTemplateColumns, gridRowGap, gridColumnGap, ...props }: GridTableProps): React__default.JSX.Element;
 //# sourceMappingURL=GridTable.d.ts.map
 
 declare const tabSizes: {
@@ -1254,24 +1278,24 @@ declare const tabSizes: {
 declare const TabBar: styled_components.StyledComponent<"ul", any, {
     padded?: boolean | undefined;
 } & SharedStyleTypes, never>;
-declare type CommonTabProps = {
+type CommonTabProps = {
     size?: keyof typeof tabSizes;
     variant?: 'primary' | 'secondary';
 };
 declare const Tab: styled_components.StyledComponent<"li", any, {
     selected?: boolean | undefined;
 } & CommonTabProps & SharedStyleTypes, never>;
-declare type TTab = {
+type TTab = {
     label: string | React__default.ReactNode;
     content: React__default.ReactNode;
     onClick?: (e?: MouseEvent<HTMLLIElement>) => void;
 } & CommonTabProps;
-declare type TabsProps = {
+type TabsProps = {
     tabs: TTab[];
     selectedTabIndex?: number;
     padded?: boolean;
 } & CommonTabProps;
-declare type TabsState = {
+type TabsState = {
     selectedTabIndex: number;
 };
 declare class Tabs extends Component<TabsProps, TabsState> {
@@ -1279,7 +1303,7 @@ declare class Tabs extends Component<TabsProps, TabsState> {
     getTab(tabs: TTab[], tabIndex?: number): null | TTab;
     componentDidMount(): void;
     componentDidUpdate(prevProps: Readonly<TabsProps>, prevState: Readonly<TabsState>): void;
-    render(): JSX.Element;
+    render(): React__default.JSX.Element;
 }
 
 declare const toggleSizes$1: {
@@ -1308,20 +1332,20 @@ declare const toggleSizes$1: {
         height: string;
     };
 };
-declare type ToggleSize$1 = keyof typeof toggleSizes$1;
+type ToggleSize$1 = keyof typeof toggleSizes$1;
 declare const ToggleLink: styled_components.StyledComponent<"a", any, {
     selected?: boolean | undefined;
     stretch?: boolean | undefined;
     size?: "small" | "medium" | "large" | undefined;
 } & SharedStyleTypes, never>;
-declare type ToggleProps = React__default.PropsWithChildren<{
+type ToggleProps = React__default.PropsWithChildren<{
     stretch?: boolean;
     onClick?: React__default.MouseEventHandler<HTMLDivElement>;
     size?: ToggleSize$1;
 } & SharedStyleTypes>;
-declare const Toggle: ({ size, ...props }: ToggleProps) => JSX.Element;
+declare const Toggle: ({ size, ...props }: ToggleProps) => React__default.JSX.Element;
 
-declare type BaseTextareaProps = {
+type BaseTextareaProps = {
     noMargin?: boolean;
     error?: boolean;
     hasIcon?: boolean;
@@ -1331,7 +1355,7 @@ declare const Textarea: styled_components.StyledComponent<"textarea", any, {
     error?: boolean | undefined;
     hasIcon?: boolean | undefined;
 } & SharedStyleTypes, never>;
-declare type TextareaProps = React__default.TextareaHTMLAttributes<HTMLTextAreaElement> & BaseTextareaProps & {
+type TextareaProps = React__default.TextareaHTMLAttributes<HTMLTextAreaElement> & BaseTextareaProps & {
     label: string;
     name?: string;
     noMargin?: boolean;
@@ -1340,7 +1364,7 @@ declare const LabeledTextarea: React__default.FC<TextareaProps>;
 
 declare const Spinner: (props: React__default.PropsWithChildren<{
     small?: boolean;
-} & SharedStyleTypes>) => JSX.Element;
+} & SharedStyleTypes>) => React__default.JSX.Element;
 
 declare const Product: (props: {
     sku: string;
@@ -1350,9 +1374,9 @@ declare const Product: (props: {
     price?: number;
     currency?: string;
     rating?: number;
-} & SharedStyleTypes) => JSX.Element;
+} & SharedStyleTypes) => React__default.JSX.Element;
 
-declare type ArtworkProps = {
+type ArtworkProps = {
     picture?: string;
     icon?: string;
     name: string;
@@ -1369,13 +1393,13 @@ declare type ArtworkProps = {
     inputProps?: InputProps;
     inputEl?: React__default.ReactNode;
 };
-declare const Artwork: ({ inputProps, onError, ...props }: ArtworkProps & SharedStyleTypes) => JSX.Element;
+declare const Artwork: ({ inputProps, onError, ...props }: ArtworkProps & SharedStyleTypes) => React__default.JSX.Element;
 
 declare const StarRating: (props: {
     rating: number;
-} & SharedStyleTypes) => JSX.Element;
+} & SharedStyleTypes) => React__default.JSX.Element;
 
-declare type RowPropTypes = {
+type RowPropTypes = {
     justify?: string;
     wrap?: string;
     align?: string;
@@ -1393,14 +1417,14 @@ declare const Row$1: styled_components.StyledComponent<"div", any, {
     end?: boolean | undefined;
     middle?: boolean | undefined;
 } & SharedStyleTypes, never>;
-declare type ColPropTypes = SizerTypes & SharedStyleTypes;
+type ColPropTypes = SizerTypes & SharedStyleTypes;
 declare const Col: styled_components.StyledComponent<"div", any, SizerTypes & SharedStyleTypes, never>;
 
 declare const Overlay: styled_components.StyledComponent<"div", any, {
     zIndex?: number | undefined;
 }, never>;
 declare const PopupHeader: styled_components.StyledComponent<"div", any, SharedStyleTypes & SizerTypes, never>;
-declare type PopupProps = React__default.PropsWithChildren<{
+type PopupProps = React__default.PropsWithChildren<{
     header?: React__default.Component;
     noHeader?: boolean;
     title?: string | React__default.Component;
@@ -1445,8 +1469,8 @@ declare const ShowPopup: React__default.FC<Omit<PopupProps, 'onClose'> & {
         onClick: () => void;
     }>;
 }>;
-declare type ChevronPopupProps = Omit<PopupProps, 'PopupWindowComponent'>;
-declare const ChevronPopup: (props: ChevronPopupProps) => JSX.Element;
+type ChevronPopupProps = Omit<PopupProps, 'PopupWindowComponent'>;
+declare const ChevronPopup: (props: ChevronPopupProps) => React__default.JSX.Element;
 
 declare const TaskLabel: styled_components.StyledComponent<"div", any, {
     hasCheckbox?: boolean | undefined;
@@ -1454,7 +1478,7 @@ declare const TaskLabel: styled_components.StyledComponent<"div", any, {
 declare const TaskName: styled_components.StyledComponent<"div", any, {}, never>;
 declare const StyledTask: styled_components.StyledComponent<"div", any, SharedStyleTypes, never>;
 declare const TaskBody: styled_components.StyledComponent<"div", any, {}, never>;
-declare type TaskProps = {
+type TaskProps = {
     taskName: string;
     date?: string;
     done?: boolean;
@@ -1464,9 +1488,9 @@ declare type TaskProps = {
     initialChecked?: boolean;
     onClickCheckbox?: (checked?: boolean) => any;
 };
-declare const Task: ({ taskName, date, done, assignee, taskBody, initialChecked, onClickCheckbox, ...props }: React__default.PropsWithChildren<TaskProps & SharedStyleTypes>) => JSX.Element;
+declare const Task: ({ taskName, date, done, assignee, taskBody, initialChecked, onClickCheckbox, ...props }: React__default.PropsWithChildren<TaskProps & SharedStyleTypes>) => React__default.JSX.Element;
 declare const StyledCalendarTaskBody: styled_components.StyledComponent<"span", any, {}, never>;
-declare type CalendarTaskProps = {
+type CalendarTaskProps = {
     id?: string;
     title: string;
     description: string | React__default.ReactNode;
@@ -1485,7 +1509,7 @@ declare type CalendarTaskProps = {
 };
 declare const CalendarTask: React__default.ForwardRefExoticComponent<CalendarTaskProps & SharedStyleTypes & React__default.InputHTMLAttributes<HTMLInputElement> & React__default.RefAttributes<HTMLInputElement>>;
 
-declare type AdditionalStyles = CSSObject | string | ((p: ThemeProps<DefaultTheme>) => CSSObject | string | undefined | null);
+type AdditionalStyles = CSSObject | string | ((p: ThemeProps<DefaultTheme>) => CSSObject | string | undefined | null);
 declare const GlobalStyle: styled_components.GlobalStyleComponent<{
     additionalStyles?: AdditionalStyles | undefined;
 }, DefaultTheme>;
@@ -2454,9 +2478,9 @@ declare const Theme: ({ theme, globalStyles, additionalGlobalStyles, children }:
     theme?: object | undefined;
     globalStyles?: boolean | undefined;
     additionalGlobalStyles?: AdditionalStyles | undefined;
-}>) => JSX.Element;
+}>) => React__default.JSX.Element;
 
-declare type TextProp = {
+type TextProp = {
     color?: keyof typeof colors;
     bold?: boolean;
 } & SharedStyleTypes;
@@ -2482,23 +2506,23 @@ declare const Number: React__default.FC<{
     decimalPoints?: number;
 } & SharedStyleTypes>;
 
-declare const Publisher: (props: React__default.PropsWithChildren<{}>) => JSX.Element;
+declare const Publisher: (props: React__default.PropsWithChildren<{}>) => React__default.JSX.Element;
 declare const FeedPost: (props: React__default.PropsWithChildren<{
     author: any;
     subject?: string;
     body: React__default.ReactNode;
     date: string;
     comments?: React__default.ReactNode[];
-} & SharedStyleTypes>) => JSX.Element;
+} & SharedStyleTypes>) => React__default.JSX.Element;
 
-declare type StateType = {
+type StateType = {
     hasError: boolean;
 };
-declare type ErrorBoundaryProps = React__default.PropsWithChildren<{}>;
+type ErrorBoundaryProps = React__default.PropsWithChildren<{}>;
 declare class ErrorBoundary extends Component<ErrorBoundaryProps, StateType> {
     constructor(props: ErrorBoundaryProps);
     componentDidCatch(error: Error | any, info: string | any): void;
-    render(): React__default.ReactNode;
+    render(): string | number | boolean | Iterable<React__default.ReactNode> | React__default.JSX.Element | null | undefined;
 }
 
 declare const CustomDateInput: React__default.ForwardRefExoticComponent<{
@@ -2509,30 +2533,27 @@ declare const CustomDateInput: React__default.ForwardRefExoticComponent<{
 } & SharedStyleTypes & React__default.InputHTMLAttributes<HTMLInputElement> & {
     isClearable?: boolean | undefined;
 } & React__default.RefAttributes<HTMLInputElement>>;
-declare type DatepickerPorps = Omit<ReactDatePickerProps, 'value'> & Omit<InputProps, 'value'> & {
+type DatepickerProps = Omit<ReactDatePickerProps, 'value'> & Omit<InputProps, 'value'> & {
     value?: Date | null;
     placeholder?: string;
 };
-declare const Datepicker: React__default.ForwardRefExoticComponent<Omit<ReactDatePickerProps, "value"> & Omit<InputProps, "value"> & {
-    value?: Date | null | undefined;
-    placeholder?: string | undefined;
-} & React__default.RefAttributes<BaseDatePicker>>;
+declare const Datepicker: ({ error, value, customInput, locale, todayButton, placeholder, placeholderText, dateFormat, isClearable, peekNextMonth, showMonthDropdown, showYearDropdown, showPopperArrow, dropdownMode, nextMonthButtonLabel, nextYearButtonLabel, previousMonthButtonLabel, previousYearButtonLabel, popperClassName, wrapperClassName, ...props }: DatepickerProps) => React__default.JSX.Element;
 
 declare const StyledDropdown: styled_components.StyledComponent<"div", any, {}, never>;
-declare type DropdownContentProps$2 = {
+type DropdownContentProps$2 = {
     primary?: boolean;
     underlined?: boolean;
     text?: string;
     width?: string | number;
     bordered?: boolean;
 };
-declare type DropdownItemProps = {
+type DropdownItemProps = {
     primary?: boolean;
     underlined?: boolean;
 };
 declare const DropdownItem: styled_components.StyledComponent<"div", any, DropdownItemProps, never>;
 declare const DropDownContent: styled_components.StyledComponent<"div", any, DropdownContentProps$2, never>;
-declare type TDropdownItem = {
+type TDropdownItem = {
     onClick?: MouseEventHandler<HTMLDivElement>;
     props?: {
         [key: string]: any;
@@ -2540,7 +2561,7 @@ declare type TDropdownItem = {
     };
     content: ReactNode | string | any;
 };
-declare type DropdownProps = {
+type DropdownProps = {
     items?: Array<TDropdownItem>;
     icon?: ReactNode;
     openMenu?: boolean;
@@ -2554,18 +2575,18 @@ declare type DropdownProps = {
     hideOnMouseLeave?: boolean;
     onToggleMenu?: (value: boolean) => void;
 };
-declare const Dropdown: ({ items, children, underlined, primary, text, icon, openMenu, onToggleMenu, mouseLeaveCallback, size, style, buttonVariant, buttonProps, width, bordered, hideOnMouseLeave, ...props }: React__default.PropsWithChildren<DropdownProps & DropdownContentProps$2>) => JSX.Element;
+declare const Dropdown: ({ items, children, underlined, primary, text, icon, openMenu, onToggleMenu, mouseLeaveCallback, size, style, buttonVariant, buttonProps, width, bordered, hideOnMouseLeave, ...props }: React__default.PropsWithChildren<DropdownProps & DropdownContentProps$2>) => React__default.JSX.Element;
 
 declare const Badge: styled_components.StyledComponent<"span", any, {
     color?: string | undefined;
 } & SharedStyleTypes, never>;
 
-declare type BackdropTypes = {
+type BackdropTypes = {
     animationDuration?: number;
 };
 declare const Backdrop: styled_components.StyledComponent<"div", any, BackdropTypes, never>;
 
-declare type HeadlessTableProps = React__default.PropsWithChildren<{
+type HeadlessTableProps = React__default.PropsWithChildren<{
     columns: any;
     data: object[];
     rowIdField: string;
@@ -2588,13 +2609,13 @@ declare type HeadlessTableProps = React__default.PropsWithChildren<{
     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 function HeadlessTable({ columns, data, rowIdField, defaultSort, defaultPageSize, defaultPageIndex, defaultScrollOffset, defaultHorizontalOffset, pageIndexDivRef, onChangeSelected, onChangeSortOrColumns, scrollOffsetDivRef, horizontalOffsetDivRef, selectedRowId, sortDirectionDivRef, currentColumnsDivRef, minHeight, pagination }: HeadlessTableProps): React__default.JSX.Element;
 
 declare const Sparkles: React__default.FC<React__default.PropsWithChildren<{
     color: string;
 }>>;
 
-declare type DropdownContentProps$1 = {
+type DropdownContentProps$1 = {
     text?: string;
     color?: string;
     active?: boolean;
@@ -2622,9 +2643,9 @@ declare const StatusDropdown: ({ items, text, value, row, setMenuIsOpen, disable
     row: any;
     setMenuIsOpen?: any;
     disabled?: boolean | undefined;
-} & DropdownContentProps$1) => JSX.Element;
+} & DropdownContentProps$1) => React__default.JSX.Element;
 
-declare type DropdownContentProps = {
+type DropdownContentProps = {
     text?: string;
     active?: boolean;
     rounded?: boolean;
@@ -2632,7 +2653,7 @@ declare type DropdownContentProps = {
     scrollContentHeight?: string;
     background?: string;
 };
-declare type StateDropdownItemProps = {
+type StateDropdownItemProps = {
     onClick?: any;
     props?: {
         [key: string]: any;
@@ -2641,7 +2662,7 @@ declare type StateDropdownItemProps = {
     value: string;
     order: number;
 };
-declare type StateDropdownProps = {
+type StateDropdownProps = {
     items: Array<StateDropdownItemProps>;
     value: StateDropdownItemProps;
     row: any;
@@ -2651,15 +2672,15 @@ declare type StateDropdownProps = {
     dataFor?: string;
     background?: string;
 } & DropdownContentProps;
-declare const StateDropdown: ({ items, text, value, row, showCircles, maxCircles, dataTip, dataFor, background, ...props }: StateDropdownProps) => JSX.Element;
+declare const StateDropdown: ({ items, text, value, row, showCircles, maxCircles, dataTip, dataFor, background, ...props }: StateDropdownProps) => React__default.JSX.Element;
 
-declare type CollapseStyledProps = {
+type CollapseStyledProps = {
     duration?: number;
     height?: null | number;
 };
-declare type CollapseWrapperProps = CollapseStyledProps;
-declare type CollapsiblePanelTitleProps = {};
-declare type CollapsibleProps$1 = CollapseWrapperProps & CollapsiblePanelTitleProps & {
+type CollapseWrapperProps = CollapseStyledProps;
+type CollapsiblePanelTitleProps = {};
+type CollapsibleProps$1 = CollapseWrapperProps & CollapsiblePanelTitleProps & {
     style?: React__default.CSSProperties;
     isOpen?: boolean;
     padded?: boolean;
@@ -2669,7 +2690,7 @@ declare type CollapsibleProps$1 = CollapseWrapperProps & CollapsiblePanelTitlePr
     onExiting?: Function;
     onExited?: Function;
 };
-declare type CollapsiblePanelProps = React__default.PropsWithChildren<Omit<CollapsibleProps$1 & {
+type CollapsiblePanelProps = React__default.PropsWithChildren<Omit<CollapsibleProps$1 & {
     onClick?: null | ((i?: number | null) => void);
 }, "isOpen"> & {
     title?: string;
@@ -2681,7 +2702,7 @@ declare type CollapsiblePanelProps = React__default.PropsWithChildren<Omit<Colla
         [key in string]: any;
     };
 }>;
-declare type CollapsiblePanelsProps = {
+type CollapsiblePanelsProps = {
     panels?: Array<CollapsiblePanelProps & {
         wrapperProps?: {
             [key in string]: any;
@@ -2693,17 +2714,17 @@ declare type CollapsiblePanelsProps = {
 declare const CollapseStyled: styled_components.StyledComponent<"div", any, CollapseStyledProps, never>;
 declare const CollapseWrapper: styled_components.StyledComponent<"div", any, CollapseStyledProps, never>;
 declare const CollapsiblePanelTitle: styled_components.StyledComponent<"div", any, {}, never>;
-declare function Collapsible$1({ onEntering, onEntered, onExit, onExiting, onExited, duration, isOpen, children, style, padded, ...props }: React__default.PropsWithChildren<CollapsibleProps$1>): JSX.Element;
-declare function CollapsiblePanel({ title, duration, isDefaultOpen, components, children, titleProps, ...props }: React__default.PropsWithChildren<CollapsiblePanelProps>): JSX.Element;
-declare function CollapsiblePanels({ panels, spaceBetween, onClickPanel }: CollapsiblePanelsProps): JSX.Element;
+declare function Collapsible$1({ onEntering, onEntered, onExit, onExiting, onExited, duration, isOpen, children, style, padded, ...props }: React__default.PropsWithChildren<CollapsibleProps$1>): React__default.JSX.Element;
+declare function CollapsiblePanel({ title, duration, isDefaultOpen, components, children, titleProps, ...props }: React__default.PropsWithChildren<CollapsiblePanelProps>): React__default.JSX.Element;
+declare function CollapsiblePanels({ panels, spaceBetween, onClickPanel }: CollapsiblePanelsProps): React__default.JSX.Element;
 
-declare type ProgressBarValue = {
+type ProgressBarValue = {
     value: number;
     text?: (v?: string | number | Object) => string | number;
     color?: string;
     textColor?: string;
 };
-declare type ProgressBarsProps = React__default.PropsWithChildren<{
+type ProgressBarsProps = React__default.PropsWithChildren<{
     values: ProgressBarValue[];
     max: number;
     color?: string;
@@ -2721,13 +2742,13 @@ declare const MultiProgress: ({ labeled, error, values, max: maxVal, ...props }:
 } & {
     labeled?: boolean | undefined;
     style?: React__default.CSSProperties | undefined;
-}) => JSX.Element;
+}) => React__default.JSX.Element;
 declare const LabeledMultiProgress: ({ title, ...props }: ProgressBarsProps & {
     style?: React__default.CSSProperties;
-}) => JSX.Element;
+}) => React__default.JSX.Element;
 //# sourceMappingURL=MultiProgress.d.ts.map
 
-declare type ThermometerProps = {
+type ThermometerProps = {
     style?: React__default.CSSProperties;
     title?: string;
     target: number;
@@ -2737,17 +2758,17 @@ declare type ThermometerProps = {
     labelTextColor?: string;
     isSecondary?: boolean;
 };
-declare function Thermometer({ title, target, value1, value1Label, barColor, labelTextColor, isSecondary, ...props }: ThermometerProps): JSX.Element;
+declare function Thermometer({ title, target, value1, value1Label, barColor, labelTextColor, isSecondary, ...props }: ThermometerProps): React__default.JSX.Element;
 
-declare type LightIndicatorProps = {
+type LightIndicatorProps = {
     name: string;
     on?: boolean;
     large?: boolean;
     textProps?: React__default.HTMLAttributes<HTMLParagraphElement>;
 };
-declare function LightIndicator({ name, on, large, textProps, ...props }: LightIndicatorProps): JSX.Element;
+declare function LightIndicator({ name, on, large, textProps, ...props }: LightIndicatorProps): React__default.JSX.Element;
 
-declare type DefaultStarProps = React__default.PropsWithChildren<{
+type DefaultStarProps = React__default.PropsWithChildren<{
     initialSelected?: boolean;
     forceSelected?: boolean;
     hoverText?: any;
@@ -2755,41 +2776,41 @@ declare type DefaultStarProps = React__default.PropsWithChildren<{
     width?: string | number;
     color?: string;
 }>;
-declare function DefaultStar({ initialSelected, forceSelected, hoverText, noText, children, width, color, ...props }: DefaultStarProps): JSX.Element;
+declare function DefaultStar({ initialSelected, forceSelected, hoverText, noText, children, width, color, ...props }: DefaultStarProps): React__default.JSX.Element;
 
-declare type CancelButtonProps = {
+type CancelButtonProps = {
     size?: TSize;
     style?: React__default.CSSProperties;
     variant?: ButtonVariant;
 } & SharedStyleTypes & SizerTypes;
-declare function CancelButton({ size, variant, style, ...Props }: CancelButtonProps): JSX.Element;
+declare function CancelButton({ size, variant, style, ...Props }: CancelButtonProps): React__default.JSX.Element;
 
-declare type DoneButtonProps = {
+type DoneButtonProps = {
     size?: TSize;
     style?: React__default.CSSProperties;
     variant?: ButtonVariant;
 } & SharedStyleTypes & SizerTypes;
-declare function DoneButton({ size, variant, style, ...Props }: DoneButtonProps): JSX.Element;
+declare function DoneButton({ size, variant, style, ...Props }: DoneButtonProps): React__default.JSX.Element;
 
-declare type NotificationExtraContentProps = {
+type NotificationExtraContentProps = {
     learnMore?: boolean;
     href?: string;
     linkText?: string;
 };
-declare type NotificationIconProps = {
+type NotificationIconProps = {
     alertType?: "neutral" | "success" | "error";
 };
-declare type AlertNotificationProps = React__default.PropsWithChildren<{
+type AlertNotificationProps = React__default.PropsWithChildren<{
     style?: React__default.CSSProperties;
 }> & NotificationIconProps & NotificationExtraContentProps & SharedStyleTypes & SizerTypes;
-declare const AlertNotification: ({ href, linkText, children, alertType, learnMore, style, ...props }: AlertNotificationProps) => JSX.Element;
+declare const AlertNotification: ({ href, linkText, children, alertType, learnMore, style, ...props }: AlertNotificationProps) => React__default.JSX.Element;
 //# sourceMappingURL=AlertNotification.d.ts.map
 
-declare type IconFuncProps = {
+type IconFuncProps = {
     color: string;
     [key: string]: any;
 };
-declare type LinkWithIconProps = React__default.PropsWithChildren<{
+type LinkWithIconProps = React__default.PropsWithChildren<{
     Icon?: TButtonIcon | React__default.ReactElement<IconFuncProps>;
     href?: string;
     color?: string;
@@ -2800,9 +2821,9 @@ declare type LinkWithIconProps = React__default.PropsWithChildren<{
     };
     style?: React__default.CSSProperties;
 } & SharedStyleTypes & SizerTypes>;
-declare function LinkWithIcon({ Icon, href, children, color, hoverColor, flexShrink, iconProps, style, ...props }: LinkWithIconProps): JSX.Element;
+declare function LinkWithIcon({ Icon, href, children, color, hoverColor, flexShrink, iconProps, style, ...props }: LinkWithIconProps): React__default.JSX.Element;
 
-declare type LocaleOptions = {
+type LocaleOptions = {
     maximumFractionDigits?: number;
     minimumSignificantDigits?: number;
     maximumSignificantDigits?: number;
@@ -2820,7 +2841,7 @@ declare type LocaleOptions = {
     minimumIntegerDigits?: number;
     minimumFractionDigits?: number;
 };
-declare type NumberInputProps = Omit<InputProps, 'onChange'> & {
+type NumberInputProps = Omit<InputProps, 'onChange'> & {
     defaultValue?: string | number;
     label?: string;
     icon?: (props: object) => React__default.ReactElement;
@@ -2831,9 +2852,9 @@ declare type NumberInputProps = Omit<InputProps, 'onChange'> & {
     localeOptions?: LocaleOptions;
     inputMode?: "none" | "text" | "numeric" | "decimal";
 };
-declare function NumberInput(props: NumberInputProps): JSX.Element;
+declare function NumberInput(props: NumberInputProps): React__default.JSX.Element;
 
-declare type InputStepperProps = Omit<NumberInputProps, 'value'> & {
+type InputStepperProps = Omit<NumberInputProps, 'value'> & {
     min?: number;
     max?: number;
     initialValue?: number | string;
@@ -2845,7 +2866,7 @@ declare type InputStepperProps = Omit<NumberInputProps, 'value'> & {
     holdIncrement?: boolean;
     holdDecrement?: boolean;
 };
-declare type InputStepperStyledProps = Omit<NumberInputProps, 'onChange'> & {
+type InputStepperStyledProps = Omit<NumberInputProps, 'onChange'> & {
     onCHange?: React__default.ChangeEventHandler<HTMLInputElement>;
     containerWidth?: string;
     style?: CSSProperties$1;
@@ -2858,8 +2879,8 @@ declare type InputStepperStyledProps = Omit<NumberInputProps, 'onChange'> & {
     onIncrement?: React__default.MouseEventHandler<HTMLButtonElement>;
     onDecrement?: React__default.MouseEventHandler<HTMLButtonElement>;
 };
-declare function InputStepperStyled(props: InputStepperStyledProps): JSX.Element;
-declare function InputStepper(props: InputStepperProps): JSX.Element;
+declare function InputStepperStyled(props: InputStepperStyledProps): React__default.JSX.Element;
+declare function InputStepper(props: InputStepperProps): React__default.JSX.Element;
 
 interface BaseSortByHeaderGroup<D extends object = {}> extends HeaderGroup<D>, UseSortByColumnProps<D> {
     containerProps?: object;
@@ -2870,7 +2891,7 @@ interface BaseSortByHeaderGroup<D extends object = {}> extends HeaderGroup<D>, U
 interface Row<D extends Record<string, unknown> = Record<string, unknown>> extends UseTableRowProps<D>, UseExpandedRowProps<D>, UseGroupByRowProps<D>, UseRowSelectRowProps<D>, UseRowStateRowProps<D> {
 }
 
-declare type VirtualTableProps = {
+type VirtualTableProps = {
     columns: Column$1<object>[];
     data: object[];
     itemSize?: (value: {
@@ -2925,7 +2946,7 @@ declare type VirtualTableProps = {
     }) => React__default.CSSProperties;
     gutterSize?: number;
 };
-declare const VirtualTable: (props: VirtualTableProps) => JSX.Element;
+declare const VirtualTable: (props: VirtualTableProps) => React__default.JSX.Element;
 
 declare const VirtualTableStyles: styled_components.StyledComponent<"div", any, {
     tableHeight?: string | number | undefined;
@@ -2937,7 +2958,7 @@ declare const VirtualTableStyles: styled_components.StyledComponent<"div", any,
 }, never>;
 //# sourceMappingURL=VirtualTableStyles.d.ts.map
 
-declare type ResponsiveValue<T = string | number> = T | Array<T | null> | {
+type ResponsiveValue<T = string | number> = T | Array<T | null> | {
     xs?: T;
     sm?: T;
     md?: T;
@@ -2946,7 +2967,7 @@ declare type ResponsiveValue<T = string | number> = T | Array<T | null> | {
 };
 
 declare const createMeasurementStyle: (v: string | number, keys: string[]) => {};
-declare type BaseCskuProps = {
+type BaseCskuProps = {
     forceStyles?: boolean;
     pr?: ResponsiveValue<string | number>;
     pl?: ResponsiveValue<string | number>;
@@ -3008,74 +3029,74 @@ declare const parseCskuStyles: (p: BaseCskuProps) => (string | number | false |
 } | {
     [key: string]: CSSObject;
 } | styled_components.FlattenSimpleInterpolation | null | undefined)[];
-declare type CskuProps<C extends keyof JSX.IntrinsicElements | React.ComponentType<any> = "div", T extends object = any, O extends object = BaseCskuProps, A extends keyof any = never> = StyledComponent<C, T, O, A>;
+type CskuProps<C extends keyof JSX.IntrinsicElements | React.ComponentType<any> = "div", T extends object = any, O extends object = BaseCskuProps, A extends keyof any = never> = StyledComponent<C, T, O, A>;
 declare const Csku: StyledComponent<"div", any, BaseCskuProps, never>;
 
-declare type BaseGridProps = {
+type BaseGridProps = {
     columns?: number;
     gap?: number | string;
 };
-declare type GridProps = React__default.HTMLAttributes<HTMLDivElement & BaseGridProps>;
+type GridProps = React__default.HTMLAttributes<HTMLDivElement & BaseGridProps>;
 declare const Grid: styled_components.StyledComponent<"div", any, BaseGridProps, never>;
-declare type BaseGridItemProps = {
+type BaseGridItemProps = {
     colSpan?: ResponsiveValue<string | number | boolean>;
     style?: ResponsiveValue<CSSObject>;
 };
-declare type GridItemProps = Omit<React__default.HTMLAttributes<HTMLDivElement>, 'style'> & BaseGridItemProps;
+type GridItemProps = Omit<React__default.HTMLAttributes<HTMLDivElement>, 'style'> & BaseGridItemProps;
 declare const GridItem: styled_components.StyledComponent<"div", any, BaseGridItemProps, never>;
 
-declare type TReactNode = React__default.ReactChild | React__default.ReactPortal | null | undefined;
-declare type CollapsibleProps = React__default.PropsWithChildren<{
+type TReactNode = React__default.ReactChild | React__default.ReactPortal | null | undefined;
+type CollapsibleProps = React__default.PropsWithChildren<{
     style?: React__default.CSSProperties;
     label: TReactNode;
     controls?: TReactNode;
     open?: boolean;
     onToggleOpen?: (v: boolean) => void;
 }>;
-declare const Collapsible: (props: CollapsibleProps) => JSX.Element;
-declare type CollapsibleLabelProps = {
+declare const Collapsible: (props: CollapsibleProps) => React__default.JSX.Element;
+type CollapsibleLabelProps = {
     children?: TReactNode;
     isOpen?: boolean;
 };
-declare const CollapsibleLabel: (props: CollapsibleLabelProps) => JSX.Element | null;
-declare type CollapsibleArrowIconProps = {
+declare const CollapsibleLabel: (props: CollapsibleLabelProps) => React__default.JSX.Element | null;
+type CollapsibleArrowIconProps = {
     isOpen?: boolean;
 };
-declare const CollapsibleArrowIcon: (props: CollapsibleArrowIconProps) => JSX.Element;
-declare type CollapsiblesProps = {
+declare const CollapsibleArrowIcon: (props: CollapsibleArrowIconProps) => React__default.JSX.Element;
+type CollapsiblesProps = {
     list: CollapsibleProps[];
     controls?: TReactNode;
 };
-declare function Collapsibles(props: CollapsiblesProps): JSX.Element;
+declare function Collapsibles(props: CollapsiblesProps): React__default.JSX.Element;
 
-declare type TableIconProps = SVGIconProps;
-declare function TableIcon({ color, size, altText, ...props }: TableIconProps): JSX.Element;
+type TableIconProps = SVGIconProps;
+declare function TableIcon({ color, size, altText, ...props }: TableIconProps): React__default.JSX.Element;
 
 declare const IconDoc: ({ ext, ...props }: {
     [key: string]: any;
     ext?: string | undefined;
-}) => JSX.Element;
+}) => React__default.JSX.Element;
 
-declare type CouponIconProps = SVGIconProps;
-declare function CouponIcon({ color, size, altText, ...props }: CouponIconProps): JSX.Element;
+type CouponIconProps = SVGIconProps;
+declare function CouponIcon({ color, size, altText, ...props }: CouponIconProps): React__default.JSX.Element;
 
-declare type AwaitingProofIconProps = SVGIconProps;
-declare function AwaitingProofIcon({ color, size, altText, ...props }: AwaitingProofIconProps): JSX.Element;
+type AwaitingProofIconProps = SVGIconProps;
+declare function AwaitingProofIcon({ color, size, altText, ...props }: AwaitingProofIconProps): React__default.JSX.Element;
 
-declare type ProofReceivedIconProps = SVGIconProps;
-declare function ProofReceivedIcon({ color, size, altText, ...props }: ProofReceivedIconProps): JSX.Element;
+type ProofReceivedIconProps = SVGIconProps;
+declare function ProofReceivedIcon({ color, size, altText, ...props }: ProofReceivedIconProps): React__default.JSX.Element;
 
-declare type PendingApprovalIconProps = SVGIconProps;
-declare function PendingApprovalIcon({ color, size, altText, ...props }: PendingApprovalIconProps): JSX.Element;
+type PendingApprovalIconProps = SVGIconProps;
+declare function PendingApprovalIcon({ color, size, altText, ...props }: PendingApprovalIconProps): React__default.JSX.Element;
 
-declare type ChangeRequestedIconProps = SVGIconProps;
-declare function ChangeRequestedIcon({ color, size, altText, ...props }: ChangeRequestedIconProps): JSX.Element;
+type ChangeRequestedIconProps = SVGIconProps;
+declare function ChangeRequestedIcon({ color, size, altText, ...props }: ChangeRequestedIconProps): React__default.JSX.Element;
 
-declare type ClientApprovedIconProps = SVGIconProps;
-declare function ClientApprovedIcon({ color, size, altText, ...props }: ClientApprovedIconProps): JSX.Element;
+type ClientApprovedIconProps = SVGIconProps;
+declare function ClientApprovedIcon({ color, size, altText, ...props }: ClientApprovedIconProps): React__default.JSX.Element;
 
-declare type ProofingCompleteIconProps = SVGIconProps;
-declare function ProofingCompleteIcon({ color, size, altText, ...props }: ProofingCompleteIconProps): JSX.Element;
+type ProofingCompleteIconProps = SVGIconProps;
+declare function ProofingCompleteIcon({ color, size, altText, ...props }: ProofingCompleteIconProps): React__default.JSX.Element;
 
 declare function ChatIcon({ color, width, mr, mt, notifs }: React__default.PropsWithChildren<{
     color?: string;
@@ -3083,94 +3104,94 @@ declare function ChatIcon({ color, width, mr, mt, notifs }: React__default.Props
     mr?: number;
     mt?: number;
     notifs?: number;
-}>): JSX.Element;
+}>): React__default.JSX.Element;
 
-declare type ColumnSelectIconProps = SVGIconProps;
-declare function ColumnSelectIcon({ color, size, altText, ...props }: ColumnSelectIconProps): JSX.Element;
+type ColumnSelectIconProps = SVGIconProps;
+declare function ColumnSelectIcon({ color, size, altText, ...props }: ColumnSelectIconProps): React__default.JSX.Element;
 
-declare type NavConnectIconProps = SVGIconProps & {
+type NavConnectIconProps = SVGIconProps & {
     filled?: boolean;
 };
-declare function NavConnectIcon({ color, size, filled, altText, ...props }: NavConnectIconProps): JSX.Element;
+declare function NavConnectIcon({ color, size, filled, altText, ...props }: NavConnectIconProps): React__default.JSX.Element;
 
-declare type NavSalesIconProps = SVGIconProps & {
+type NavSalesIconProps = SVGIconProps & {
     filled?: boolean;
 };
-declare function NavSalesIcon({ color, size, filled, altText, ...props }: NavSalesIconProps): JSX.Element;
+declare function NavSalesIcon({ color, size, filled, altText, ...props }: NavSalesIconProps): React__default.JSX.Element;
 
-declare type NavProdIconProps = SVGIconProps & {
+type NavProdIconProps = SVGIconProps & {
     filled?: boolean;
 };
-declare function NavProdIcon({ color, size, filled, altText, ...props }: NavProdIconProps): JSX.Element;
+declare function NavProdIcon({ color, size, filled, altText, ...props }: NavProdIconProps): React__default.JSX.Element;
 
-declare type NavFinanceIconProps = SVGIconProps & {
+type NavFinanceIconProps = SVGIconProps & {
     filled?: boolean;
 };
-declare function NavFinanceIcon({ color, size, filled, altText, ...props }: NavFinanceIconProps): JSX.Element;
+declare function NavFinanceIcon({ color, size, filled, altText, ...props }: NavFinanceIconProps): React__default.JSX.Element;
 
-declare type NavResourcesIconProps = SVGIconProps & {
+type NavResourcesIconProps = SVGIconProps & {
     filled?: boolean;
 };
-declare function NavResourcesIcon({ color, size, filled, altText, ...props }: NavResourcesIconProps): JSX.Element;
+declare function NavResourcesIcon({ color, size, filled, altText, ...props }: NavResourcesIconProps): React__default.JSX.Element;
 
-declare type NavManagementIconProps = SVGIconProps & {
+type NavManagementIconProps = SVGIconProps & {
     filled?: boolean;
 };
-declare function NavManagementIcon({ color, size, filled, altText, ...props }: NavManagementIconProps): JSX.Element;
+declare function NavManagementIcon({ color, size, filled, altText, ...props }: NavManagementIconProps): React__default.JSX.Element;
 
-declare type TrashIconProps = SVGIconProps & {
+type TrashIconProps = SVGIconProps & {
     filled?: boolean;
     pinned?: boolean;
 };
-declare function TrashIcon({ color, size, filled, pinned, altText, ...props }: TrashIconProps): JSX.Element;
+declare function TrashIcon({ color, size, filled, pinned, altText, ...props }: TrashIconProps): React__default.JSX.Element;
 
-declare type PinIconProps = SVGIconProps & {
+type PinIconProps = SVGIconProps & {
     filled?: boolean;
     pinned?: boolean;
     unpin?: boolean;
 };
-declare function PinIcon({ color, size, filled, unpin, pinned, altText, ...props }: PinIconProps): JSX.Element;
+declare function PinIcon({ color, size, filled, unpin, pinned, altText, ...props }: PinIconProps): React__default.JSX.Element;
 
-declare type TaskIconProps = SVGIconProps;
-declare function TaskIcon({ color, size, altText, ...props }: TaskIconProps): JSX.Element;
+type TaskIconProps = SVGIconProps;
+declare function TaskIcon({ color, size, altText, ...props }: TaskIconProps): React__default.JSX.Element;
 
-declare type AddTaskIconProps = SVGIconProps;
-declare function AddTaskIcon({ color, size, altText, ...props }: AddTaskIconProps): JSX.Element;
+type AddTaskIconProps = SVGIconProps;
+declare function AddTaskIcon({ color, size, altText, ...props }: AddTaskIconProps): React__default.JSX.Element;
 
-declare type NoteIconProps = SVGIconProps;
-declare function NoteIcon({ color, size, altText, ...props }: NoteIconProps): JSX.Element;
+type NoteIconProps = SVGIconProps;
+declare function NoteIcon({ color, size, altText, ...props }: NoteIconProps): React__default.JSX.Element;
 
-declare type AddNoteIconProps = SVGIconProps;
-declare function AddNoteIcon({ color, size, altText, ...props }: AddNoteIconProps): JSX.Element;
+type AddNoteIconProps = SVGIconProps;
+declare function AddNoteIcon({ color, size, altText, ...props }: AddNoteIconProps): React__default.JSX.Element;
 
-declare type LockIconProps = SVGIconProps & {
+type LockIconProps = SVGIconProps & {
     locked?: boolean;
 };
-declare function LockIcon({ color, size, locked, altText, ...props }: LockIconProps): JSX.Element;
+declare function LockIcon({ color, size, locked, altText, ...props }: LockIconProps): React__default.JSX.Element;
 
-declare type InfoIconProps = SVGIconProps & {
+type InfoIconProps = SVGIconProps & {
     filled?: boolean;
     pinned?: boolean;
 };
-declare function InfoIcon({ color, size, filled, pinned, altText, ...props }: InfoIconProps): JSX.Element;
+declare function InfoIcon({ color, size, filled, pinned, altText, ...props }: InfoIconProps): React__default.JSX.Element;
 
-declare type DownloadIconProps = SVGIconProps;
-declare function DownloadIcon({ color, size, altText, ...props }: DownloadIconProps): JSX.Element;
+type DownloadIconProps = SVGIconProps;
+declare function DownloadIcon({ color, size, altText, ...props }: DownloadIconProps): React__default.JSX.Element;
 
-declare type UploadIconProps = SVGIconProps;
-declare function UploadIcon({ color, size, altText, ...props }: UploadIconProps): JSX.Element;
+type UploadIconProps = SVGIconProps;
+declare function UploadIcon({ color, size, altText, ...props }: UploadIconProps): React__default.JSX.Element;
 
-declare type MarketingStatusIconProps = SVGIconProps & {
+type MarketingStatusIconProps = SVGIconProps & {
     approved?: boolean;
 };
-declare function MarketingStatusIcon({ color, size, approved, altText, ...props }: MarketingStatusIconProps): JSX.Element;
+declare function MarketingStatusIcon({ color, size, approved, altText, ...props }: MarketingStatusIconProps): React__default.JSX.Element;
 
-declare type GearIconProps = SVGIconProps & {
+type GearIconProps = SVGIconProps & {
     filled?: boolean;
 };
-declare function GearIcon({ color, filled, size, altText, ...props }: GearIconProps): JSX.Element;
+declare function GearIcon({ color, filled, size, altText, ...props }: GearIconProps): React__default.JSX.Element;
 
-declare type CircleProgressIconProps = SVGIconProps & {
+type CircleProgressIconProps = SVGIconProps & {
     sqSize?: number;
     strokeWidth?: number;
     percentage?: number;
@@ -3180,7 +3201,7 @@ declare type CircleProgressIconProps = SVGIconProps & {
     viewBox?: string;
     textStyle?: React__default.CSSProperties;
 };
-declare function CircleProgressIcon({ sqSize, strokeWidth, percentage, strokeColor, textColor, text, textStyle, color, size, altText, ...props }: CircleProgressIconProps): JSX.Element;
+declare function CircleProgressIcon({ sqSize, strokeWidth, percentage, strokeColor, textColor, text, textStyle, color, size, altText, ...props }: CircleProgressIconProps): React__default.JSX.Element;
 
 declare function Loading({ height, width, animationDuration, barWidth, barRadius, colorful, bars, viewBox, rotate, startColor, endColor, ...props }: {
     height?: number;
@@ -3194,258 +3215,282 @@ declare function Loading({ height, width, animationDuration, barWidth, barRadius
     startColor?: string;
     endColor?: string;
     rotate?: boolean;
-} & SharedStyleTypes): JSX.Element;
+} & SharedStyleTypes): React__default.JSX.Element;
 //# sourceMappingURL=Loading.d.ts.map
 
-declare type SalesArrowIconDirection = 'up' | 'down';
-declare type SalesArrowIconProps = SVGIconProps & {
+type SalesArrowIconDirection = 'up' | 'down';
+type SalesArrowIconProps = SVGIconProps & {
     direction?: SalesArrowIconDirection;
 };
-declare function SalesArrowIcon({ color, size, direction, altText, ...props }: SalesArrowIconProps): JSX.Element;
+declare function SalesArrowIcon({ color, size, direction, altText, ...props }: SalesArrowIconProps): React__default.JSX.Element;
 
-declare type AlertIconProps = SVGIconProps & {
+type AlertIconProps = SVGIconProps & {
     filled?: boolean;
 };
-declare function AlertIcon({ color, size, filled, altText, ...props }: AlertIconProps): JSX.Element;
+declare function AlertIcon({ color, size, filled, altText, ...props }: AlertIconProps): React__default.JSX.Element;
 
-declare type AddIconProps$1 = SVGIconProps;
-declare function CompletedCheckmarkIcon({ color, size, altText, ...props }: AddIconProps$1): JSX.Element;
+type AddIconProps$1 = SVGIconProps;
+declare function CompletedCheckmarkIcon({ color, size, altText, ...props }: AddIconProps$1): React__default.JSX.Element;
 
-declare type BulletIconProps = SVGIconProps;
-declare function BulletIcon({ color, size, ...props }: BulletIconProps): JSX.Element;
+type BulletIconProps = SVGIconProps;
+declare function BulletIcon({ color, size, ...props }: BulletIconProps): React__default.JSX.Element;
 
-declare type UsersIconProps = SVGIconProps;
-declare function UsersIcon({ color, size, altText, ...props }: UsersIconProps): JSX.Element;
+type UsersIconProps = SVGIconProps;
+declare function UsersIcon({ color, size, altText, ...props }: UsersIconProps): React__default.JSX.Element;
 
-declare type ReceiptLongIconProps = SVGIconProps;
-declare function ReceiptLongIcon({ color, size, altText, ...props }: ReceiptLongIconProps): JSX.Element;
+type ReceiptLongIconProps = SVGIconProps;
+declare function ReceiptLongIcon({ color, size, altText, ...props }: ReceiptLongIconProps): React__default.JSX.Element;
 
-declare type FolderIconProps = SVGIconProps;
-declare function FolderIcon({ color, size, ...props }: FolderIconProps): JSX.Element;
+type FolderIconProps = SVGIconProps;
+declare function FolderIcon({ color, size, ...props }: FolderIconProps): React__default.JSX.Element;
 
-declare type CalendarIconProps = SVGIconProps;
-declare function CalendarIcon({ color, size, altText, ...props }: CalendarIconProps): JSX.Element;
+type CalendarIconProps = SVGIconProps;
+declare function CalendarIcon({ color, size, altText, ...props }: CalendarIconProps): React__default.JSX.Element;
 
-declare type PromostandardsIconProps = SVGIconProps;
-declare function PromostandardsIcon({ size, altText, ...props }: PromostandardsIconProps): JSX.Element;
+type PromostandardsIconProps = SVGIconProps;
+declare function PromostandardsIcon({ size, altText, ...props }: PromostandardsIconProps): React__default.JSX.Element;
 
-declare type XIconProps = SVGIconProps;
-declare function XIcon({ color, size, altText, ...props }: XIconProps): JSX.Element;
+type XIconProps = SVGIconProps;
+declare function XIcon({ color, size, altText, ...props }: XIconProps): React__default.JSX.Element;
 
-declare type IconVariants$3 = 'primary' | 'cta';
-declare type OpportunityCircleIconProps = SVGIconProps & {
+type IconVariants$3 = 'primary' | 'cta';
+type OpportunityCircleIconProps = SVGIconProps & {
     variant?: IconVariants$3;
     selected?: boolean;
 };
-declare function OpportunityCircleIcon({ variant, selected, size, altText, style, ...props }: OpportunityCircleIconProps): JSX.Element;
+declare function OpportunityCircleIcon({ variant, selected, size, altText, style, ...props }: OpportunityCircleIconProps): React__default.JSX.Element;
 
-declare type IconVariants$2 = 'primary' | 'cta';
-declare type PresentationCircleIconProps = SVGIconProps & {
+type IconVariants$2 = 'primary' | 'cta';
+type PresentationCircleIconProps = SVGIconProps & {
     variant?: IconVariants$2;
     selected?: boolean;
 };
-declare function PresentationCircleIcon({ variant, selected, size, altText, style, ...props }: PresentationCircleIconProps): JSX.Element;
+declare function PresentationCircleIcon({ variant, selected, size, altText, style, ...props }: PresentationCircleIconProps): React__default.JSX.Element;
 
-declare type IconVariants$1 = 'primary' | 'cta';
-declare type EstimateCircleIconProps = SVGIconProps & {
+type IconVariants$1 = 'primary' | 'cta';
+type EstimateCircleIconProps = SVGIconProps & {
     variant?: IconVariants$1;
     selected?: boolean;
 };
-declare function EstimateCircleIcon({ variant, selected, size, altText, style, ...props }: EstimateCircleIconProps): JSX.Element;
+declare function EstimateCircleIcon({ variant, selected, size, altText, style, ...props }: EstimateCircleIconProps): React__default.JSX.Element;
 
-declare type IconVariants = 'primary' | 'cta';
-declare type SalesOrderCircleIconProps = SVGIconProps & {
+type IconVariants = 'primary' | 'cta';
+type SalesOrderCircleIconProps = SVGIconProps & {
     variant?: IconVariants;
     selected?: boolean;
 };
-declare function SalesOrderCircleIcon({ variant, selected, size, altText, style, ...props }: SalesOrderCircleIconProps): JSX.Element;
+declare function SalesOrderCircleIcon({ variant, selected, size, altText, style, ...props }: SalesOrderCircleIconProps): React__default.JSX.Element;
 
-declare type DollarIconProps = SVGIconProps;
-declare function DollarIcon({ color, size, altText, ...props }: DollarIconProps): JSX.Element;
+type DollarIconProps = SVGIconProps;
+declare function DollarIcon({ color, size, altText, ...props }: DollarIconProps): React__default.JSX.Element;
 
-declare type BotIconProps = SVGIconProps;
-declare function BotIcon({ color, size, altText, ...props }: BotIconProps): JSX.Element;
+type BotIconProps = SVGIconProps;
+declare function BotIcon({ color, size, altText, ...props }: BotIconProps): React__default.JSX.Element;
 
-declare type GalleryIconProps = SVGIconProps;
-declare function GalleryIcon({ color, size, altText, ...props }: GalleryIconProps): JSX.Element;
+type GalleryIconProps = SVGIconProps;
+declare function GalleryIcon({ color, size, altText, ...props }: GalleryIconProps): React__default.JSX.Element;
 
-declare type ListIconProps = SVGIconProps;
-declare function ListIcon({ color, size, altText, ...props }: ListIconProps): JSX.Element;
+type ListIconProps = SVGIconProps;
+declare function ListIcon({ color, size, altText, ...props }: ListIconProps): React__default.JSX.Element;
 
-declare type TilesIconProps = SVGIconProps & {
+type TilesIconProps = SVGIconProps & {
     filled?: boolean;
 };
-declare function TilesIcon({ color, size, filled, altText, ...props }: TilesIconProps): JSX.Element;
+declare function TilesIcon({ color, size, filled, altText, ...props }: TilesIconProps): React__default.JSX.Element;
 
-declare type UserIconProps = SVGIconProps;
-declare function UserIcon({ color, size, altText, ...props }: UserIconProps): JSX.Element;
+type UserIconProps = SVGIconProps;
+declare function UserIcon({ color, size, altText, ...props }: UserIconProps): React__default.JSX.Element;
 
-declare type ArrowIconDirection$1 = 'up' | 'right' | 'down' | 'left';
-declare type ArrowIconProps = SVGIconProps & {
+type ArrowIconDirection$1 = 'up' | 'right' | 'down' | 'left';
+type ArrowIconProps = SVGIconProps & {
     direction?: ArrowIconDirection$1;
 };
-declare function ArrowIcon({ color, direction, altText, size, ...props }: ArrowIconProps): JSX.Element;
+declare function ArrowIcon({ color, direction, altText, size, ...props }: ArrowIconProps): React__default.JSX.Element;
 
-declare type ChevronIconDirection = 'up' | 'right' | 'down' | 'left' | 'updown' | 'leftright';
-declare type ChevronIconProps = SVGIconProps & {
+type ChevronIconDirection = 'up' | 'right' | 'down' | 'left' | 'updown' | 'leftright';
+type ChevronIconProps = SVGIconProps & {
     direction?: ChevronIconDirection;
 };
-declare function ChevronIcon({ color, direction, altText, size, ...props }: ChevronIconProps): JSX.Element;
+declare function ChevronIcon({ color, direction, altText, size, ...props }: ChevronIconProps): React__default.JSX.Element;
 
-declare type FilledChevronIconDirection = 'up' | 'right' | 'down' | 'left' | 'updown' | 'leftright';
-declare type FilledChevronIconProps = SVGIconProps & {
+type FilledChevronIconDirection = 'up' | 'right' | 'down' | 'left' | 'updown' | 'leftright';
+type FilledChevronIconProps = SVGIconProps & {
     direction?: FilledChevronIconDirection;
 };
-declare function FilledChevronIcon({ color, direction, altText, size, ...props }: FilledChevronIconProps): JSX.Element;
+declare function FilledChevronIcon({ color, direction, altText, size, ...props }: FilledChevronIconProps): React__default.JSX.Element;
 
-declare type CheckmarkIconProps = SVGIconProps;
-declare function CheckmarkIcon({ color, size, altText, ...props }: CheckmarkIconProps): JSX.Element;
+type CheckmarkIconProps = SVGIconProps;
+declare function CheckmarkIcon({ color, size, altText, ...props }: CheckmarkIconProps): React__default.JSX.Element;
 
-declare type AddIconProps = SVGIconProps;
-declare function AddIcon({ color, size, altText, ...props }: AddIconProps): JSX.Element;
+type AddIconProps = SVGIconProps;
+declare function AddIcon({ color, size, altText, ...props }: AddIconProps): React__default.JSX.Element;
 
-declare type SubtractIconProps = SVGIconProps;
-declare function SubtractIcon({ color, size, altText, ...props }: SubtractIconProps): JSX.Element;
+type SubtractIconProps = SVGIconProps;
+declare function SubtractIcon({ color, size, altText, ...props }: SubtractIconProps): React__default.JSX.Element;
 
-declare type SearchIconProps = SVGIconProps;
-declare function SearchIcon({ color, size, altText, ...props }: SearchIconProps): JSX.Element;
+type SearchIconProps = SVGIconProps;
+declare function SearchIcon({ color, size, altText, ...props }: SearchIconProps): React__default.JSX.Element;
 
-declare type ClockIconProps = SVGIconProps;
-declare function ClockIcon({ color, size, ...props }: ClockIconProps): JSX.Element;
+type ClockIconProps = SVGIconProps;
+declare function ClockIcon({ color, size, ...props }: ClockIconProps): React__default.JSX.Element;
 
-declare type ClipboardIconProps = SVGIconProps;
-declare function ClipboardIcon({ color, size, ...props }: ClipboardIconProps): JSX.Element;
+type ClipboardIconProps = SVGIconProps;
+declare function ClipboardIcon({ color, size, ...props }: ClipboardIconProps): React__default.JSX.Element;
 
-declare type EditIconProps = SVGIconProps & {
+type EditIconProps = SVGIconProps & {
     filled?: boolean;
 };
-declare function EditIcon({ color, size, filled, altText, ...props }: EditIconProps): JSX.Element;
+declare function EditIcon({ color, size, filled, altText, ...props }: EditIconProps): React__default.JSX.Element;
 
-declare type GridIconProps = SVGIconProps;
-declare function GridIcon({ color, size, altText, ...props }: GridIconProps): JSX.Element;
+type GridIconProps = SVGIconProps;
+declare function GridIcon({ color, size, altText, ...props }: GridIconProps): React__default.JSX.Element;
 
-declare type TemplateIconProps = SVGIconProps & {
+type TemplateIconProps = SVGIconProps & {
     filled?: boolean;
 };
-declare function TemplateIcon({ color, size, filled, altText, ...props }: TemplateIconProps): JSX.Element;
+declare function TemplateIcon({ color, size, filled, altText, ...props }: TemplateIconProps): React__default.JSX.Element;
 
-declare type PercentIconProps = SVGIconProps;
-declare function PercentIcon({ color, size, altText, ...props }: PercentIconProps): JSX.Element;
+type PercentIconProps = SVGIconProps;
+declare function PercentIcon({ color, size, altText, ...props }: PercentIconProps): React__default.JSX.Element;
 
-declare type TargetIconProps = SVGIconProps;
-declare function TargetIcon({ color, size, altText, ...props }: TargetIconProps): JSX.Element;
+type TargetIconProps = SVGIconProps;
+declare function TargetIcon({ color, size, altText, ...props }: TargetIconProps): React__default.JSX.Element;
 
-declare type IntegrationsIconProps = SVGIconProps & {
+type IntegrationsIconProps = SVGIconProps & {
     filled?: boolean;
 };
-declare function IntegrationsIcon({ color, size, filled, altText, ...props }: IntegrationsIconProps): JSX.Element;
+declare function IntegrationsIcon({ color, size, filled, altText, ...props }: IntegrationsIconProps): React__default.JSX.Element;
 
-declare type MailIconProps = SVGIconProps & {
+type MailIconProps = SVGIconProps & {
     filled?: boolean;
 };
-declare function MailIcon({ color, size, filled, altText, ...props }: MailIconProps): JSX.Element;
+declare function MailIcon({ color, size, filled, altText, ...props }: MailIconProps): React__default.JSX.Element;
 
-declare type EpsIconProps = SVGIconProps;
-declare function EpsIcon({ color, size, altText, ...props }: EpsIconProps): JSX.Element;
+type EpsIconProps = SVGIconProps;
+declare function EpsIcon({ color, size, altText, ...props }: EpsIconProps): React__default.JSX.Element;
 
-declare type StarIconProps = SVGIconProps & {
+type StarIconProps = SVGIconProps & {
     hover?: boolean;
     filled?: boolean;
 };
-declare function StarIcon({ color, size, hover, filled, altText, ...props }: StarIconProps): JSX.Element;
+declare function StarIcon({ color, size, hover, filled, altText, ...props }: StarIconProps): React__default.JSX.Element;
 
-declare type EyeIconProps = SVGIconProps & {
+type EyeIconProps = SVGIconProps & {
     hide?: boolean;
 };
-declare function EyeIcon({ color, size, hide, altText, ...props }: EyeIconProps): JSX.Element;
+declare function EyeIcon({ color, size, hide, altText, ...props }: EyeIconProps): React__default.JSX.Element;
 
-declare type MenuIconProps = SVGIconProps;
-declare function MenuIcon({ color, size, altText, ...props }: MenuIconProps): JSX.Element;
+type MenuIconProps = SVGIconProps;
+declare function MenuIcon({ color, size, altText, ...props }: MenuIconProps): React__default.JSX.Element;
 
-declare type CommentIconProps = {
+type CommentIconProps = {
     number?: number;
 } & SVGIconProps;
-declare function CommentIcon({ color, size, altText, number, ...props }: CommentIconProps): JSX.Element;
+declare function CommentIcon({ color, size, altText, number, ...props }: CommentIconProps): React__default.JSX.Element;
 
-declare type EllipsisIconProps = SVGIconProps;
-declare function EllipsisIcon({ color, size, altText, ...props }: EllipsisIconProps): JSX.Element;
+type EllipsisIconProps = SVGIconProps;
+declare function EllipsisIcon({ color, size, altText, ...props }: EllipsisIconProps): React__default.JSX.Element;
 
-declare type DragIconProps = SVGIconProps;
-declare function DragIcon({ color, size, altText, ...props }: DragIconProps): JSX.Element;
+type DragIconProps = SVGIconProps;
+declare function DragIcon({ color, size, altText, ...props }: DragIconProps): React__default.JSX.Element;
 
-declare type CreditCardIcon = SVGIconProps;
-declare function CreditCardIcon({ color, size, altText, ...props }: CreditCardIcon): JSX.Element;
+type CreditCardIcon = SVGIconProps;
+declare function CreditCardIcon({ color, size, altText, ...props }: CreditCardIcon): React__default.JSX.Element;
 
-declare type ShopIcon = SVGIconProps;
-declare function ShopIcon({ color, size, altText, ...props }: ShopIcon): JSX.Element;
+type ShopIcon = SVGIconProps;
+declare function ShopIcon({ color, size, altText, ...props }: ShopIcon): React__default.JSX.Element;
 
-declare type HistoryIcon = SVGIconProps;
-declare function HistoryIcon({ color, size, altText, ...props }: HistoryIcon): JSX.Element;
+type HistoryIcon = SVGIconProps;
+declare function HistoryIcon({ color, size, altText, ...props }: HistoryIcon): React__default.JSX.Element;
 
-declare type HandleIcon = SVGIconProps;
-declare function HandleIcon({ color, size, altText, ...props }: HandleIcon): JSX.Element;
+type HandleIcon = SVGIconProps;
+declare function HandleIcon({ color, size, altText, ...props }: HandleIcon): React__default.JSX.Element;
 
-declare type ShoppingCartIconProps = SVGIconProps;
-declare function ShoppingCartIcon({ color, size, altText, ...props }: ShoppingCartIconProps): JSX.Element;
+type ShoppingCartIconProps = SVGIconProps;
+declare function ShoppingCartIcon({ color, size, altText, ...props }: ShoppingCartIconProps): React__default.JSX.Element;
 //# sourceMappingURL=ShoppingCartIcon.d.ts.map
 
-declare type AddShoppingCartIconProps = SVGIconProps;
-declare function AddShoppingCartIcon({ color, size, altText, ...props }: AddShoppingCartIconProps): JSX.Element;
+type AddShoppingCartIconProps = SVGIconProps;
+declare function AddShoppingCartIcon({ color, size, altText, ...props }: AddShoppingCartIconProps): React__default.JSX.Element;
 
-declare type CommunityIconProps = SVGIconProps;
-declare function CommunityIcon({ size, altText, ...props }: CommunityIconProps): JSX.Element;
+type CommunityIconProps = SVGIconProps;
+declare function CommunityIcon({ size, altText, ...props }: CommunityIconProps): React__default.JSX.Element;
 
-declare type ConnectedIconProps = SVGIconProps;
-declare function ConnectedIcon({ size, altText, ...props }: ConnectedIconProps): JSX.Element;
+type ConnectedIconProps = SVGIconProps;
+declare function ConnectedIcon({ size, altText, ...props }: ConnectedIconProps): React__default.JSX.Element;
 
-declare type ConnectedPlusIconProps = SVGIconProps;
-declare function ConnectedPlusIcon({ size, altText, ...props }: ConnectedPlusIconProps): JSX.Element;
+type ConnectedPlusIconProps = SVGIconProps;
+declare function ConnectedPlusIcon({ size, altText, ...props }: ConnectedPlusIconProps): React__default.JSX.Element;
 
-declare type CollaborateIconProps = SVGIconProps;
-declare function CollaborateIcon({ color, size, altText, ...props }: CollaborateIconProps): JSX.Element;
+type CollaborateIconProps = SVGIconProps;
+declare function CollaborateIcon({ color, size, altText, ...props }: CollaborateIconProps): React__default.JSX.Element;
 
-declare type InventoryIconProps = SVGIconProps;
-declare function InventoryIcon({ color, size, altText, ...props }: InventoryIconProps): JSX.Element;
+type InventoryIconProps = SVGIconProps;
+declare function InventoryIcon({ color, size, altText, ...props }: InventoryIconProps): React__default.JSX.Element;
 
-declare type OrderStatusIconProps = SVGIconProps;
-declare function OrderStatusIcon({ color, size, altText, ...props }: OrderStatusIconProps): JSX.Element;
+type OrderStatusIconProps = SVGIconProps;
+declare function OrderStatusIcon({ color, size, altText, ...props }: OrderStatusIconProps): React__default.JSX.Element;
 
-declare type EPOIconProps = SVGIconProps;
-declare function EPOIcon({ color, size, altText, ...props }: EPOIconProps): JSX.Element;
+type EPOIconProps = SVGIconProps;
+declare function EPOIcon({ color, size, altText, ...props }: EPOIconProps): React__default.JSX.Element;
 
-declare type HelpIconProps = SVGIconProps;
-declare function HelpIcon({ color, size, altText, ...props }: HelpIconProps): JSX.Element;
+type HelpIconProps = SVGIconProps;
+declare function HelpIcon({ color, size, altText, ...props }: HelpIconProps): React__default.JSX.Element;
 
-declare type FileUploadIconProps = SVGIconProps;
-declare function FileUploadIcon({ color, size, altText, ...props }: FileUploadIconProps): JSX.Element;
+type FileUploadIconProps = SVGIconProps;
+declare function FileUploadIcon({ color, size, altText, ...props }: FileUploadIconProps): React__default.JSX.Element;
 
-declare type ArrowIconDirection = 'left' | 'right' | 'down' | 'up';
-declare type DoubleArrowIconProps = SVGIconProps & {
+type ArrowIconDirection = 'left' | 'right' | 'down' | 'up';
+type DoubleArrowIconProps = SVGIconProps & {
     direction?: ArrowIconDirection;
 };
-declare function DoubleArrowIcon({ color, direction, size, altText, ...props }: DoubleArrowIconProps): JSX.Element;
+declare function DoubleArrowIcon({ color, direction, size, altText, ...props }: DoubleArrowIconProps): React__default.JSX.Element;
+
+type ImageIcon = SVGIconProps;
+declare function ImageIcon(props: ImageIcon): React__default.JSX.Element;
 
-declare type ImageIcon = SVGIconProps;
-declare function ImageIcon(props: ImageIcon): JSX.Element;
+type StarLightIconProps = SVGIconProps;
+declare function StarLightIcon({ color, size, altText, ...props }: StarLightIconProps): React__default.JSX.Element;
 
-declare type StarLightIconProps = SVGIconProps;
-declare function StarLightIcon({ color, size, altText, ...props }: StarLightIconProps): JSX.Element;
+type StarDarkIconProps = SVGIconProps;
+declare function StarDarkIcon({ color, size, altText, ...props }: StarDarkIconProps): React__default.JSX.Element;
 
-declare type StarDarkIconProps = SVGIconProps;
-declare function StarDarkIcon({ color, size, altText, ...props }: StarDarkIconProps): JSX.Element;
+type MagicIconProps = SVGIconProps & {
+    hover?: boolean;
+    filled?: boolean;
+};
+declare function MagicIcon({ color, size, hover, filled, altText, ...props }: MagicIconProps): React__default.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  .react-datepicker__aria-live {\n    display: none;\n  }\n\n  @media only screen and (min-height: 600px) and (max-height: 800px ) {\n    .react-datepicker__month {\n      overflow-y: scroll !important;\n      height: 15vh !important;\n    }\n  }\n  @media only screen and (max-height: 599px ) {\n    .react-datepicker__month {\n      overflow-y: scroll !important;\n      height: 5vh !important;\n    }\n  }\n}\n";
+type MagicEraserIconProps = SVGIconProps & {
+    hover?: boolean;
+    filled?: boolean;
+};
+declare function MagicEraserIcon({ color, size, hover, filled, altText, ...props }: MagicEraserIconProps): React__default.JSX.Element;
+
+type TrendDirections = 'up' | 'down' | 'flat';
+type TrendProps = SVGIconProps & {
+    direction?: TrendDirections;
+};
+declare function TrendIcon({ size, direction, altText, ...props }: TrendProps): React__default.JSX.Element;
+
+type SlideInIconProps = SVGIconProps & {
+    hover?: boolean;
+    filled?: boolean;
+};
+declare function SlideInIcon({ color, size, hover, filled, altText, ...props }: SlideInIconProps): React__default.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__time-container {\n    margin-top: -2px;\n    border-top-left-radius: 0px;\n    border-right: 2px solid var(--color-primary1-60);\n    border-bottom: 2px solid var(--color-primary1-60);\n    border-top: 2px solid var(--color-primary1-60);\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  .react-datepicker__aria-live {\n    display: none;\n  }\n\n  @media only screen and (min-height: 600px) and (max-height: 800px ) {\n    .react-datepicker__month {\n      overflow-y: scroll !important;\n      height: 15vh !important;\n    }\n  }\n  @media only screen and (max-height: 599px ) {\n    .react-datepicker__month {\n      overflow-y: scroll !important;\n      height: 5vh !important;\n    }\n\n    .react-datepicker__time-container {\n      margin-top: -2px;\n      border-top-left-radius: 0px;\n      border-right: 2px solid var(--color-primary1-60);\n      border-bottom: 2px solid var(--color-primary1-60);\n      border-top: 2px solid var(--color-primary1-60);\n    }\n  }\n}\n";
 //# sourceMappingURL=datepickerStyles.d.ts.map
 
-declare type ConfirmPopupProps = {
+type ConfirmPopupProps = {
     disableDelete?: boolean;
     confirmText?: string;
     onDelete?: () => void;
     onClose?: () => void;
 };
-declare const ConfirmPopup: (props: ConfirmPopupProps) => JSX.Element;
+declare const ConfirmPopup: (props: ConfirmPopupProps) => React__default.JSX.Element;
 
-declare type ConfirmAlertPopupProps = React__default.PropsWithChildren<{
+type ConfirmAlertPopupProps = React__default.PropsWithChildren<{
     padding?: string;
     maxWidth: string | number;
     title?: React__default.ReactNode;
@@ -3455,18 +3500,18 @@ declare type ConfirmAlertPopupProps = React__default.PropsWithChildren<{
     onAction?: () => void;
     onClose?: () => void;
 }>;
-declare const ConfirmAlertPopup: (props: ConfirmAlertPopupProps) => JSX.Element;
+declare const ConfirmAlertPopup: (props: ConfirmAlertPopupProps) => React__default.JSX.Element;
 
-declare type CalendarDayBodyProps = React__default.PropsWithChildren<{
+type CalendarDayBodyProps = React__default.PropsWithChildren<{
     day: Date;
     selectedDate: Date;
     onClick: React__default.MouseEventHandler<HTMLDivElement>;
     weekend?: boolean;
 }>;
-declare const CalendarDayBody: ({ day, selectedDate, onClick, children, weekend, ...props }: CalendarDayBodyProps) => JSX.Element;
+declare const CalendarDayBody: ({ day, selectedDate, onClick, children, weekend, ...props }: CalendarDayBodyProps) => React__default.JSX.Element;
 //# sourceMappingURL=CalendarDayBody.d.ts.map
 
-declare type CalendarDaysBodyProps = {
+type CalendarDaysBodyProps = {
     days: Array<{
         __id__: string;
         day: Date;
@@ -3487,7 +3532,7 @@ declare type CalendarDaysBodyProps = {
         }>) => React__default.ReactElement;
     };
 };
-declare const CalendarDaysBody: ({ days, currentMonth, selectedDate, onClickDay, components, dayBodyProps, weekend, ...props }: CalendarDaysBodyProps) => JSX.Element;
+declare const CalendarDaysBody: ({ days, currentMonth, selectedDate, onClickDay, components, dayBodyProps, weekend, ...props }: CalendarDaysBodyProps) => React__default.JSX.Element;
 //# sourceMappingURL=CalendarDaysBody.d.ts.map
 
 declare const CalendarDaysHeader: ({ currentMonth, selectedDate, weekend }: {
@@ -3495,7 +3540,7 @@ declare const CalendarDaysHeader: ({ currentMonth, selectedDate, weekend }: {
     currentMonth: Date;
     selectedDate: Date;
     weekend: boolean;
-}) => JSX.Element;
+}) => React__default.JSX.Element;
 //# sourceMappingURL=CalendarDaysHeader.d.ts.map
 
 declare const CalendarWrapper: styled_components.StyledComponent<"div", any, {}, never>;
@@ -3504,139 +3549,25 @@ declare const CalendarWrapper: styled_components.StyledComponent<"div", any, {},
 declare const DaysBodyWrapper: styled_components.StyledComponent<"div", any, {}, never>;
 //# sourceMappingURL=DaysBodyWrapper.d.ts.map
 
-declare const DaysHeaderWrapper: styled_components.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;
+}) => React__default.JSX.Element;
 //# sourceMappingURL=DefaultCalendarFooter.d.ts.map
 
 declare const DefaultCalendarHeader: ({ onPrevWeek, onNextWeek, currentMonth, }: {
     onPrevWeek: React__default.MouseEventHandler;
     onNextWeek: React__default.MouseEventHandler;
     currentMonth: Date;
-}) => JSX.Element;
+}) => React__default.JSX.Element;
 //# sourceMappingURL=DefaultCalendarHeader.d.ts.map
 
-declare const HeaderWrapper: styled_components.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: styled_components.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: styled_components.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;
+}) => React__default.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 const useCalendar: ({ onChangeWeek, onChangeMonth, }: useCalendarProps) => {
-    currentMonth: Date;
-    currentWeek: number;
-    selectedDate: Date;
-    setSelectedDate: React$1.Dispatch<React$1.SetStateAction<Date>>;
-    setCurrentWeek: React$1.Dispatch<React$1.SetStateAction<number>>;
-    setCurrentMonth: React$1.Dispatch<React$1.SetStateAction<Date>>;
-    onClickDay: (day: Date) => void;
-    onNextWeek: () => void;
-    onPrevWeek: () => void;
-    onNextMonth: () => void;
-    onPrevMonth: () => void;
-    changeWeek: (action: string, value?: Date) => void;
-    changeDate: (value: Date) => void;
-    getDatesBetween: (startDt: Date, endDt: Date) => Date[];
-    onReset: () => void;
-};
-
-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__default.PropsWithChildren<TasksCalendarHeaderProps>) => JSX.Element;
-
-declare type TasksCalendarFooterProps = {
+type TasksCalendarFooterProps = {
     onNextWeek: VoidFunction;
     onPrevWeek: VoidFunction;
     onNextMonth: VoidFunction;
@@ -3646,9 +3577,9 @@ declare type TasksCalendarFooterProps = {
     selectedDate: Date;
     [key: string]: any;
 };
-declare const TasksCalendarFooter: ({ currentWeek, tasks, }: React__default.PropsWithChildren<TasksCalendarFooterProps>) => JSX.Element;
+declare const TasksCalendarFooter: ({ currentWeek, tasks, }: React__default.PropsWithChildren<TasksCalendarFooterProps>) => React__default.JSX.Element;
 
-declare type CalendarHeaderComponentProps = {
+type CalendarHeaderComponentProps = {
     onNextWeek: VoidFunction;
     onPrevWeek: VoidFunction;
     onNextMonth: VoidFunction;
@@ -3658,7 +3589,7 @@ declare type CalendarHeaderComponentProps = {
     selectedDate: Date;
     [key: string]: any;
 };
-declare type CalendarProps = {
+type CalendarProps = {
     components?: {
         Header?: (props: React__default.PropsWithChildren<CalendarHeaderComponentProps>) => React__default.ReactElement;
         Footer?: (props: React__default.PropsWithChildren<CalendarHeaderComponentProps>) => React__default.ReactElement;
@@ -3680,9 +3611,9 @@ declare type CalendarProps = {
         };
     };
 };
-declare const Calendar: ({ components, extraProps, ...props }: CalendarProps) => JSX.Element;
+declare const Calendar: ({ components, extraProps, ...props }: CalendarProps) => React__default.JSX.Element;
 
-declare type TasksCalendarProps = CalendarProps & {
+type TasksCalendarProps = CalendarProps & {
     tasks: Array<CalendarTaskProps>;
     headerTabs?: Array<TTab>;
     footerTasks?: Array<CalendarTaskProps>;
@@ -3695,9 +3626,63 @@ declare type TasksCalendarProps = CalendarProps & {
         }>) => React__default.ReactElement;
     };
 };
-declare const TasksCalendar: ({ tasks, headerTabs, footerTasks, components, ...props }: TasksCalendarProps) => JSX.Element;
+declare const TasksCalendar: ({ tasks, headerTabs, footerTasks, components, ...props }: TasksCalendarProps) => React__default.JSX.Element;
+
+type onChangeWeekFunc = (obj: {
+    date: Date;
+    week: number;
+    month: number;
+    year: number;
+    action: string;
+}) => void;
+type onChangeMonthFunc = (obj: {
+    date: Date;
+    month: number;
+    year: number;
+    action: string;
+}) => void;
+type useCalendarProps = {
+    onChangeWeek?: onChangeWeekFunc;
+    onChangeMonth?: onChangeMonthFunc;
+};
+declare const useCalendar: ({ onChangeWeek, onChangeMonth, }: useCalendarProps) => {
+    currentMonth: Date;
+    currentWeek: number;
+    selectedDate: Date;
+    setSelectedDate: React$1.Dispatch<React$1.SetStateAction<Date>>;
+    setCurrentWeek: React$1.Dispatch<React$1.SetStateAction<number>>;
+    setCurrentMonth: React$1.Dispatch<React$1.SetStateAction<Date>>;
+    onClickDay: (day: Date) => void;
+    onNextWeek: () => void;
+    onPrevWeek: () => void;
+    onNextMonth: () => void;
+    onPrevMonth: () => void;
+    changeWeek: (action: string, value?: Date) => void;
+    changeDate: (value: Date) => void;
+    getDatesBetween: (startDt: Date, endDt: Date) => Date[];
+    onReset: () => void;
+};
+
+type ACTIONS = 'TOGGLE_CHECKBOX' | 'DROP';
+type onUpdateTaskFunc = (newData: CalendarTaskProps, otherData: {
+    index: number;
+    action: ACTIONS;
+    oldTask: CalendarTaskProps;
+    sourceType?: string;
+    updatedFields?: string[];
+    day__id?: string;
+    task__id?: string;
+}) => void | any;
+type onClickTaskFunc = (task: CalendarTaskProps) => void | any;
+type TCalendarView = {
+    type: string;
+    title: string;
+    selected: boolean;
+    Icon?: TButtonIcon;
+};
+type onClickViewFunc = (viewType: string, view?: TCalendarView) => void;
 
-declare type DraggableTasksCalendarProps = CalendarProps & {
+type DraggableTasksCalendarProps = CalendarProps & {
     tasks: Array<CalendarTaskProps>;
     onUpdateTask: onUpdateTaskFunc;
     onClickTask?: onClickTaskFunc;
@@ -3720,7 +3705,7 @@ declare type DraggableTasksCalendarProps = CalendarProps & {
     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 DraggableTasksCalendar: ({ views, tasks, onUpdateTask, onClickTask, headerTabs, footerTasks, components, weekend, onChangeWeek, onChangeMonth, onToggleWeekend, showAddTaskBtn, onClickAddTask, onClickView, loading, showFooterTasks, ...props }: DraggableTasksCalendarProps) => React__default.JSX.Element;
 
 declare const SimpleWindowedTableStyles: styled_components.StyledComponent<"div", any, {
     bordered?: string | boolean | undefined;
@@ -3729,7 +3714,7 @@ declare const SimpleWindowedTableStyles: styled_components.StyledComponent<"div"
     selectedRowIndex?: number | undefined;
     selectedRowStyle?: boolean | CSSObject | undefined;
 }, never>;
-declare type SimpleWindowedTableProps = {
+type SimpleWindowedTableProps = {
     columns: Column$1<object>[];
     data: object[];
     itemSize?: number;
@@ -3758,7 +3743,7 @@ declare type SimpleWindowedTableProps = {
         [key: string]: any;
     }>) => React__default.ReactElement;
 };
-declare function SimpleWindowedTable({ columns, data, itemSize, height, minWidth, maxWidth, defaultSort, onClickRow, onScroll, onUpdateData, useTableProps, tableHeaderProps, tableFooterProps, headerGroupStyle, hideFooter, clearRowFullWidth, className, NoRowsFound, }: SimpleWindowedTableProps): JSX.Element;
+declare function SimpleWindowedTable({ columns, data, itemSize, height, minWidth, maxWidth, defaultSort, onClickRow, onScroll, onUpdateData, useTableProps, tableHeaderProps, tableFooterProps, headerGroupStyle, hideFooter, clearRowFullWidth, className, NoRowsFound, }: SimpleWindowedTableProps): React__default.JSX.Element;
 
 declare function useDelayUnmount(isMounted: boolean, delayTime: number): boolean;
 //# sourceMappingURL=useDelayUnmount.d.ts.map
@@ -3815,37 +3800,37 @@ declare const toggleSizes: {
         height: string;
     };
 };
-declare type ToggleSize = keyof typeof toggleSizes;
-declare type CommonProps = {
+type ToggleSize = keyof typeof toggleSizes;
+type CommonProps = {
     selected?: boolean;
     stretch?: boolean;
     size?: ToggleSize;
 };
-declare type ToggleSwitchProps = {
+type ToggleSwitchProps = {
     onClick?: React__default.MouseEventHandler<HTMLDivElement>;
     style?: React__default.CSSProperties;
 } & CommonProps & Omit<Omit<Omit<BaseCskuProps, 'hidden'>, 'color'>, 'style'>;
-declare type ToggleSwitchStatedProps = {
+type ToggleSwitchStatedProps = {
     initialSelected?: boolean;
     style?: React__default.CSSProperties;
     onClick?: (value: boolean) => void;
 } & Omit<CommonProps, 'selected'> & Omit<BaseCskuProps, 'style'>;
-declare const ToggleSwitchStyled: ({ onClick, size, selected, stretch, style, ...props }: ToggleSwitchProps) => JSX.Element;
-declare const ToggleSwitch: ({ size, initialSelected, stretch, onClick, ...props }: ToggleSwitchStatedProps) => JSX.Element;
+declare const ToggleSwitchStyled: ({ onClick, size, selected, stretch, style, ...props }: ToggleSwitchProps) => React__default.JSX.Element;
+declare const ToggleSwitch: ({ size, initialSelected, stretch, onClick, ...props }: ToggleSwitchStatedProps) => React__default.JSX.Element;
 
-declare type GenericObj = {
+type GenericObj = {
     [key: string]: any;
 };
-declare type TConcreteChildElement<P = GenericObj> = React__default.ReactElement<P> | React__default.JSXElementConstructor<P>;
-declare type TChildElement<P = GenericObj> = TConcreteChildElement<P> | string | number | boolean | null | undefined;
-declare type ChildProps<P = GenericObj> = {
+type TConcreteChildElement<P = GenericObj> = React__default.ReactElement<P> | React__default.JSXElementConstructor<P>;
+type TChildElement<P = GenericObj> = TConcreteChildElement<P> | string | number | boolean | null | undefined;
+type ChildProps<P = GenericObj> = {
     children: TChildElement<P>;
     parseProps?: (props: P, elem: TConcreteChildElement<P>) => Partial<P>;
 };
-declare const RenderChild: ({ children, parseProps, ...props }: ChildProps) => JSX.Element;
+declare const RenderChild: React__default.ForwardRefExoticComponent<ChildProps<GenericObj> & React__default.RefAttributes<HTMLElement>>;
 
-declare type ChildDropzoneState = Omit<DropzoneState, 'getRootProps' | 'rootRef' | 'getInputProps' | 'inputRef'>;
-declare type DropZoneProps = DropzoneOptions & {
+type ChildDropzoneState = Omit<DropzoneState, 'getRootProps' | 'rootRef' | 'getInputProps' | 'inputRef'>;
+type DropzoneProps = DropzoneOptions & {
     children: TChildElement<Partial<ChildDropzoneState>>;
     className?: string;
     style?: React__default.CSSProperties;
@@ -3854,7 +3839,7 @@ declare type DropZoneProps = DropzoneOptions & {
     useDropzoneProps?: boolean;
 };
 /**
- * DropZone
+ * Dropzone
  *
  * if `useDropzoneProps={true}` is passed then dropzone options props will passed to child element
  *
@@ -3870,22 +3855,22 @@ declare type DropZoneProps = DropzoneOptions & {
  *   );
  * };
  *
- * <DropZone useDropzoneProps={true} noClick={true} onDrop={...}>
+ * <Dropzone useDropzoneProps={true} noClick={true} onDrop={...}>
  *   <DropzoneChild />
- * </DropZone>
+ * </Dropzone>
  * ```
  *
  * ---------------------------------------------------------
  *
  * Example without `useDropzoneProps` (dropzone props will NOT be passed in children):
  * ```
- * <DropZone onDrop={...}>
+ * <Dropzone onDrop={...}>
  *   <button onClick={() => {}}>Upload</button>
- * </DropZone>
+ * </Dropzone>
  * ```
  *
  */
-declare const DropZone: React__default.ForwardRefExoticComponent<Pick<React__default.HTMLProps<HTMLElement>, "multiple" | "onDragEnter" | "onDragOver" | "onDragLeave"> & {
+declare const Dropzone: React__default.ForwardRefExoticComponent<Pick<React__default.HTMLProps<HTMLElement>, "multiple" | "onDragEnter" | "onDragOver" | "onDragLeave"> & {
     accept?: string | string[] | undefined;
     minSize?: number | undefined;
     maxSize?: number | undefined;
@@ -3909,4 +3894,4 @@ declare const DropZone: React__default.ForwardRefExoticComponent<Pick<React__def
     useDropzoneProps?: boolean | undefined;
 } & React__default.RefAttributes<DropzoneRef>>;
 
-export { AddIcon, AddNoteIcon, AddShoppingCartIcon, AddTaskIcon, AlertIcon, AlertNotification, ArrowIcon, Artwork, ArtworkProps, SKUAsyncSelect as AsyncSelect, Avatar, AvatarColor, AvatarShape, AvatarSize, AwaitingProofIcon, Backdrop, Background, Badge, BaseCskuProps, BotIcon, Box, BulletIcon, Button, ButtonPreset, ButtonProps, ButtonVariant, ButtonsGroup, Calendar, CalendarDayBody, CalendarDaysBody, CalendarDaysHeader, CalendarIcon, CalendarTask, CalendarTaskProps, CalendarWrapper, CancelButton, ChangeRequestedIcon, ChatIcon, CheckMark, CheckboxIcon, CheckboxLabel, CheckmarkIcon, ChevronIcon, ChevronPopup, CircleProgressIcon, ClientApprovedIcon, ClipboardIcon, ClockIcon, Col, ColPropTypes, CollaborateIcon, CollapseStyled, CollapseStyledProps, CollapseWrapper, CollapseWrapperProps, Collapsible$1 as Collapsible, CollapsibleArrowIcon, CollapsibleLabel, CollapsiblePanel, CollapsiblePanelProps, CollapsiblePanelTitle, CollapsiblePanelTitleProps, CollapsiblePanels, CollapsiblePanelsProps, CollapsibleProps$1 as CollapsibleProps, Collapsible as CollapsibleV2, Collapsibles, Column, ColumnSelectIcon, CommentIcon, CommunityIcon, CompletedCheckmarkIcon, ConfirmAlertPopup, ConfirmPopup, ConnectedIcon, ConnectedPlusIcon, CouponIcon, SKUCreatableSelect as CreatableSelect, CreditCardIcon, Csku, CskuProps, CustomDateInput, Datepicker, DatepickerPorps, DaysBodyWrapper, DaysHeaderWrapper, DefaultCalendarFooter, DefaultCalendarHeader, DefaultStar, DollarIcon, DoneButton, Dot, DoubleArrowIcon, DownloadIcon, DragIcon, DraggableTasksCalendar, DropArea, DropAreaProps, DropDownContent, DropZone, DropZoneProps, Dropdown, DropdownItem, DropdownProps, DropzoneTypes, Dropzoned, DropzonedPreviews, EPOIcon, EditIcon, EllipsisIcon, EpsIcon, ErrorBoundary, EstimateCircleIcon, EyeIcon, FeedPost, FileUploadIcon, FilledChevronIcon, FolderIcon, GalleryIcon, GearIcon, GlobalStyle, Grid, GridCell, GridIcon, GridItem, GridItemProps, GridProps, GridRow, GridTable, GridTableContainer, H1, H2, H3, H4, H5, H6, HandleIcon, HeaderWrapper, HeadlessTable, HelpIcon, HistoryIcon, IconButton, IconButtonProps, IconDoc, ImageIcon, Img, InfoIcon, Input, InputIconLabel, InputIconLabelContainer, InputProps, InputStepper, InputStepperStyled, IntegrationsIcon, InventoryIcon, Label, LabeledAsyncSelect, LabeledCheckbox, LabeledCheckboxProps, LabeledCreatableSelect, LabeledIconInput, LabeledInput, LabeledMultiProgress, LabeledProgress, LabeledRadio, LabeledRadioGroup, LabeledRadioInButton, LabeledRadioInButtonGroup, LabeledRadioProps, LabeledSelect, LabeledTextarea, LightIndicator, Link, LinkWithIcon, ListIcon, Loading, LockIcon, MailIcon, MarketingStatusIcon, MenuIcon, MultiProgress, NavConnectIcon, NavFinanceIcon, NavManagementIcon, NavProdIcon, NavResourcesIcon, NavSalesIcon, NoteIcon, Number, NumberInput, OpportunityCircleIcon, OrderStatusIcon, Overlay, Padding, Page, PanelContact, PanelTileContact, PendingApprovalIcon, PercentIcon, PinIcon, Popup, PopupHeader, PopupProps, PresentationCircleIcon, Product, Progress, PromostandardsIcon, ProofReceivedIcon, ProofingCompleteIcon, Publisher, Radio, RadioIcon, RadioLabel, RadioProps, ReceiptLongIcon, RenderChild, ResponsiveTable, Row$1 as Row, RowPropTypes, SHARED_STYLE_MAPS, SalesArrowIcon, SalesOrderCircleIcon, SearchIcon, SKUSelect as Select, SharedStyleTypes, SharedStyles, ShopIcon, ShoppingCartIcon, ShowPopup, SidePanel, SimpleWindowedTable, SimpleWindowedTableProps, SimpleWindowedTableStyles, SizerCss, SizerTypes, SizerWrapper, Sparkles, Spinner, StarDarkIcon, StarIcon, StarLightIcon, StarRating, StateDropdown, StatusDropdown, StyledCalendarTaskBody, StyledDayBody, StyledDayText, StyledDropArea, StyledDropdown, StyledPanel, StyledTask, SubtractIcon, SVG as SvgIcon, TBody, TButtonIcon, TD, TDropdownItem, TH, THSorted, THead, TR, 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, ToggleSwitch, ToggleSwitchProps, ToggleSwitchStatedProps, ToggleSwitchStyled, TrashIcon, UploadIcon, UserIcon, UsersIcon, VirtualTable, VirtualTableStyles, Wrapper, XIcon, colors, createMeasurementStyle, datepickerStyles, fontFamilies, fontStyles, fonts, getColor, getFontStyle, getThemeColor, getThemeFontFamily, getThemeFontSize, getThemeFontStyle, getThemeProperty, parseCskuStyles, sizes, themeOptions, toggleSizes$1 as toggleSizes, useCalendar, useClickOutside, useDelayUnmount, useFallbackRef, useLongPress, usePrefersReducedMotion, useRandomInterval, useWindowSize };
+export { AddIcon, AddNoteIcon, AddShoppingCartIcon, AddTaskIcon, AlertIcon, AlertNotification, ArrowIcon, Artwork, ArtworkProps, SKUAsyncSelect as AsyncSelect, Avatar, AvatarColor, AvatarShape, AvatarSize, AwaitingProofIcon, Backdrop, Background, Badge, BaseCskuProps, BotIcon, Box, BulletIcon, Button, ButtonPreset, ButtonProps, ButtonVariant, ButtonsGroup, Calendar, CalendarDayBody, CalendarDaysBody, CalendarDaysHeader, CalendarIcon, CalendarTask, CalendarTaskProps, CalendarWrapper, CancelButton, ChangeRequestedIcon, ChatIcon, CheckMark, CheckboxIcon, CheckboxLabel, CheckmarkIcon, ChevronIcon, ChevronPopup, CircleProgressIcon, ClientApprovedIcon, ClipboardIcon, ClockIcon, Col, ColPropTypes, CollaborateIcon, CollapseStyled, CollapseStyledProps, CollapseWrapper, CollapseWrapperProps, Collapsible$1 as Collapsible, CollapsibleArrowIcon, CollapsibleLabel, CollapsiblePanel, CollapsiblePanelProps, CollapsiblePanelTitle, CollapsiblePanelTitleProps, CollapsiblePanels, CollapsiblePanelsProps, CollapsibleProps$1 as CollapsibleProps, Collapsible as CollapsibleV2, Collapsibles, Column, ColumnSelectIcon, CommentIcon, CommunityIcon, CompletedCheckmarkIcon, ConfirmAlertPopup, ConfirmPopup, ConnectedIcon, ConnectedPlusIcon, CouponIcon, SKUCreatableSelect as CreatableSelect, CreditCardIcon, Csku, CskuProps, CustomDateInput, Datepicker, DaysBodyWrapper, DefaultCalendarFooter, DefaultCalendarHeader, DefaultStar, DollarIcon, DoneButton, Dot, DoubleArrowIcon, DownloadIcon, DragIcon, DraggableTasksCalendar, DropArea, DropAreaProps, DropDownContent, Dropdown, DropdownItem, DropdownProps, Dropzone, DropzoneProps, DropzoneTypes, Dropzoned, DropzonedPreviews, EPOIcon, EditIcon, EllipsisIcon, EpsIcon, ErrorBoundary, EstimateCircleIcon, EyeIcon, FeedPost, FileUploadIcon, FilledChevronIcon, FolderIcon, GalleryIcon, GearIcon, GlobalStyle, Grid, GridCell, GridIcon, GridItem, GridItemProps, GridProps, GridRow, GridTable, GridTableContainer, H1, H2, H3, H4, H5, H6, HandleIcon, HeadlessTable, HelpIcon, HistoryIcon, IconButton, IconButtonProps, IconDoc, ImageIcon, Img, InfoIcon, Input, InputIconLabel, InputIconLabelContainer, InputProps, InputStepper, InputStepperStyled, IntegrationsIcon, InventoryIcon, Label, LabeledAsyncSelect, LabeledCheckbox, LabeledCheckboxProps, LabeledCreatableSelect, LabeledIconInput, LabeledInput, LabeledMultiProgress, LabeledProgress, LabeledRadio, LabeledRadioGroup, LabeledRadioInButton, LabeledRadioInButtonGroup, LabeledRadioProps, LabeledSelect, LabeledTextarea, LightIndicator, Link, LinkWithIcon, ListIcon, Loading, LockIcon, MagicEraserIcon, MagicIcon, MailIcon, MarketingStatusIcon, MenuIcon, MultiProgress, NavConnectIcon, NavFinanceIcon, NavManagementIcon, NavProdIcon, NavResourcesIcon, NavSalesIcon, NoteIcon, Number, NumberInput, OpportunityCircleIcon, OrderStatusIcon, Overlay, Padding, Page, PanelContact, PanelTileContact, PendingApprovalIcon, PercentIcon, PinIcon, Popup, PopupHeader, PopupProps, PresentationCircleIcon, Product, Progress, PromostandardsIcon, ProofReceivedIcon, ProofingCompleteIcon, Publisher, Radio, RadioIcon, RadioLabel, RadioProps, ReceiptLongIcon, RenderChild, ResponsiveTable, Row$1 as Row, RowPropTypes, SHARED_STYLE_MAPS, SalesArrowIcon, SalesOrderCircleIcon, SearchIcon, SKUSelect as Select, SharedStyleTypes, SharedStyles, ShopIcon, ShoppingCartIcon, ShowPopup, SidePanel, SimpleWindowedTable, SimpleWindowedTableProps, SimpleWindowedTableStyles, SizerCss, SizerTypes, SizerWrapper, SlideInIcon, Sparkles, Spinner, StarDarkIcon, StarIcon, StarLightIcon, StarRating, StateDropdown, StatusDropdown, StyledCalendarTaskBody, StyledDropArea, StyledDropdown, StyledPanel, StyledTask, SubtractIcon, SVG as SvgIcon, TBody, TButtonIcon, TD, TDropdownItem, TH, THSorted, THead, TR, TSize, TSizeOffset, TSizeOffsetRight, TSizeStyle, TTab, Tab, TabBar, Table, TableIcon, Tabs, TabsProps, TargetIcon, Task, TaskBody, TaskIcon, TaskLabel, TaskName, TaskProps, TasksCalendar, TasksCalendarDayBody, TasksCalendarFooter, TemplateIcon, Text, TextProp, Textarea, Theme, Thermometer, TilesIcon, Toggle, ToggleLink, ToggleSwitch, ToggleSwitchProps, ToggleSwitchStatedProps, ToggleSwitchStyled, TrashIcon, TrendIcon, UploadIcon, UserIcon, UsersIcon, VirtualTable, VirtualTableStyles, Wrapper, XIcon, colors, createMeasurementStyle, datepickerStyles, fontFamilies, fontStyles, fonts, getColor, getFontStyle, getThemeColor, getThemeFontFamily, getThemeFontSize, getThemeFontStyle, getThemeProperty, parseCskuStyles, sizes, themeOptions, toggleSizes$1 as toggleSizes, useCalendar, useClickOutside, useDelayUnmount, useFallbackRef, useLongPress, usePrefersReducedMotion, useRandomInterval, useWindowSize };