@commonsku/styles 1.16.13 → 1.16.15

package/dist/index.d.ts

@@ -3,7 +3,8 @@ import * as React$1 from 'react';
 import React__default, { CSSProperties, MouseEvent, Component, ReactEventHandler, MouseEventHandler, ReactNode, MutableRefObject, ForwardedRef } from 'react';
 import * as styled_components from 'styled-components';
 import { CSSObject, DefaultTheme, ThemeProps, CSSProperties as CSSProperties$1, StyledComponent } from 'styled-components';
-import { DropzoneOptions } from 'react-dropzone';
+import * as react_dropzone from 'react-dropzone';
+import { DropzoneOptions, DropzoneRootProps, DropzoneInputProps, DropzoneRef, DropzoneState } from 'react-dropzone';
 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';
@@ -14,7 +15,7 @@ import * as react_select_dist_declarations_src_filters from 'react-select/dist/d
 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 { UseFiltersColumnProps, UseGroupByColumnProps, UseResizeColumnsColumnProps, UseSortByColumnProps, UseTableRowProps, UseExpandedRowProps, UseGroupByRowProps, UseRowSelectRowProps, UseRowStateRowProps, Column as Column$1, SortingRule, Cell } from 'react-table';
+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 = {
@@ -142,11 +143,7 @@ declare type DropzoneTypes = {
     showDroppedFiles?: boolean;
 } & DropzoneOptions;
 declare function Dropzoned({ placeholder, accept, showDroppedFiles, ...props }: DropzoneTypes): JSX.Element;
-declare function DropzonedPreviews({ placeholder, accept, onDrop, ...props }: DropzoneTypes): JSX.Element;
-declare type DropzoneSimpleProps = {
-    children: React__default.ReactElement;
-} & DropzoneOptions;
-declare function DropzonedSimple({ accept, children, ...props }: DropzoneSimpleProps): React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+declare function DropzonedPreviews({ placeholder, accept, onDrop, ...props }: DropzoneTypes): JSX.Element;
 
 declare type TSize$1 = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
@@ -567,6 +564,18 @@ declare type AdditionalSKUSelectProps = {
     error?: boolean;
     menuRelative?: boolean;
     inPopup?: boolean;
+    controlStyles?: React__default.CSSProperties;
+    menuStyles?: React__default.CSSProperties;
+    menuListStyles?: React__default.CSSProperties;
+    menuPortalStyles?: React__default.CSSProperties;
+    optionStyles?: React__default.CSSProperties;
+    inputStyles?: React__default.CSSProperties;
+    clearIndicatorStyles?: React__default.CSSProperties;
+    dropdownIndicatorStyles?: React__default.CSSProperties;
+    indicatorSeparatorStyles?: React__default.CSSProperties;
+    singleValueStyles?: React__default.CSSProperties;
+    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"> & {
     'aria-live'?: "off" | "assertive" | "polite" | undefined;
@@ -747,6 +756,7 @@ declare const LabeledSelect: React__default.ForwardRefExoticComponent<Additional
     tabSelectsValue?: 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>>>>;
@@ -929,6 +939,7 @@ declare const LabeledCreatableSelect: React__default.ForwardRefExoticComponent<A
     tabSelectsValue?: 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>>>>;
@@ -1111,6 +1122,7 @@ declare const LabeledAsyncSelect: React__default.ForwardRefExoticComponent<Addit
     tabSelectsValue?: 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;
     label?: string | undefined;
     required?: boolean | undefined;
 } & React__default.RefAttributes<SelectInstance<unknown, false, GroupBase<unknown>>>>;
@@ -2482,8 +2494,9 @@ declare const FeedPost: (props: React__default.PropsWithChildren<{
 declare type StateType = {
     hasError: boolean;
 };
-declare class ErrorBoundary extends Component<object, StateType> {
-    constructor(props: StateType);
+declare 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;
 }
@@ -2577,9 +2590,9 @@ declare type HeadlessTableProps = React__default.PropsWithChildren<{
 } & SharedStyleTypes>;
 declare function HeadlessTable({ columns, data, rowIdField, defaultSort, defaultPageSize, defaultPageIndex, defaultScrollOffset, defaultHorizontalOffset, pageIndexDivRef, onChangeSelected, onChangeSortOrColumns, scrollOffsetDivRef, horizontalOffsetDivRef, selectedRowId, sortDirectionDivRef, currentColumnsDivRef, minHeight, pagination }: HeadlessTableProps): JSX.Element;
 
-declare const Sparkles: React__default.FC<{
+declare const Sparkles: React__default.FC<React__default.PropsWithChildren<{
     color: string;
-}>;
+}>>;
 
 declare type DropdownContentProps$1 = {
     text?: string;
@@ -2848,8 +2861,12 @@ declare type InputStepperStyledProps = Omit<NumberInputProps, 'onChange'> & {
 declare function InputStepperStyled(props: InputStepperStyledProps): JSX.Element;
 declare function InputStepper(props: InputStepperProps): JSX.Element;
 
-interface ColumnInstance<D extends Record<string, unknown> = Record<string, unknown>> extends UseFiltersColumnProps<D>, UseGroupByColumnProps<D>, UseResizeColumnsColumnProps<D>, UseSortByColumnProps<D> {
-}
+interface BaseSortByHeaderGroup<D extends object = {}> extends HeaderGroup<D>, UseSortByColumnProps<D> {
+    containerProps?: object;
+    style?: React__default.CSSProperties;
+    className?: string;
+}
+
 interface Row<D extends Record<string, unknown> = Record<string, unknown>> extends UseTableRowProps<D>, UseExpandedRowProps<D>, UseGroupByRowProps<D>, UseRowSelectRowProps<D>, UseRowStateRowProps<D> {
 }
 
@@ -2865,7 +2882,7 @@ declare type VirtualTableProps = {
     maxWidth?: number;
     defaultSort?: SortingRule<string>;
     onClickRow?: (row?: object, index?: number, data?: {
-        isScrolling: boolean;
+        isScrolling?: boolean;
         cell: Cell<Record<string, unknown>, any>;
         resetList: (index?: number) => void;
         toggleAllRowsExpanded: (value?: boolean | undefined) => void;
@@ -2895,7 +2912,7 @@ declare type VirtualTableProps = {
         [key: string]: any;
     }>) => React__default.ReactElement;
     onSort?: (value: {
-        column: ColumnInstance;
+        column: BaseSortByHeaderGroup<object>;
     }) => void;
     onResize?: VoidFunction;
     rowGroupStyles?: (value: {
@@ -3417,7 +3434,7 @@ declare function StarLightIcon({ color, size, altText, ...props }: StarLightIcon
 declare type StarDarkIconProps = SVGIconProps;
 declare function StarDarkIcon({ color, size, altText, ...props }: StarDarkIconProps): 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";
+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";
 //# sourceMappingURL=datepickerStyles.d.ts.map
 
 declare type ConfirmPopupProps = {
@@ -3816,4 +3833,80 @@ declare type ToggleSwitchStatedProps = {
 declare const ToggleSwitchStyled: ({ onClick, size, selected, stretch, style, ...props }: ToggleSwitchProps) => JSX.Element;
 declare const ToggleSwitch: ({ size, initialSelected, stretch, onClick, ...props }: ToggleSwitchStatedProps) => JSX.Element;
 
-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, Dropdown, DropdownItem, DropdownProps, DropzoneSimpleProps, DropzoneTypes, Dropzoned, DropzonedPreviews, DropzonedSimple, 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, 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 };
+declare 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> = {
+    children: TChildElement<P>;
+    parseProps?: (props: P, elem: TConcreteChildElement<P>) => Partial<P>;
+};
+declare const RenderChild: ({ children, parseProps, ...props }: ChildProps) => JSX.Element;
+
+declare type ChildDropzoneState = Omit<DropzoneState, 'getRootProps' | 'rootRef' | 'getInputProps' | 'inputRef'>;
+declare type DropZoneProps = DropzoneOptions & {
+    children: TChildElement<Partial<ChildDropzoneState>>;
+    className?: string;
+    style?: React__default.CSSProperties;
+    rootProps?: DropzoneRootProps;
+    inputProps?: DropzoneInputProps;
+    useDropzoneProps?: boolean;
+};
+/**
+ * DropZone
+ *
+ * if `useDropzoneProps={true}` is passed then dropzone options props will passed to child element
+ *
+ * Example with `useDropzoneProps={true}` (dropzone props will be passed in children):
+ * ```
+ * const DropzoneChild = ({ open, ...dropzoneOptions }) => {
+ *   // do something with dropzoneOptions...
+ *   return (
+ *     <>
+ *       <button onClick={open}>Upload</button>
+ *       <div>{draggedFiles.map(f => <div>{f.name (f.type)}</div>)}</div>
+ *     </>
+ *   );
+ * };
+ *
+ * <DropZone useDropzoneProps={true} noClick={true} onDrop={...}>
+ *   <DropzoneChild />
+ * </DropZone>
+ * ```
+ *
+ * ---------------------------------------------------------
+ *
+ * Example without `useDropzoneProps` (dropzone props will NOT be passed in children):
+ * ```
+ * <DropZone onDrop={...}>
+ *   <button onClick={() => {}}>Upload</button>
+ * </DropZone>
+ * ```
+ *
+ */
+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;
+    preventDropOnDocument?: boolean | undefined;
+    noClick?: boolean | undefined;
+    noKeyboard?: boolean | undefined;
+    noDrag?: boolean | undefined;
+    noDragEventsBubbling?: boolean | undefined;
+    disabled?: boolean | undefined;
+    onDrop?<T extends File>(acceptedFiles: T[], rejectedFiles: T[], event: react_dropzone.DropEvent): void;
+    onDropAccepted?<T_1 extends File>(files: T_1[], event: react_dropzone.DropEvent): void;
+    onDropRejected?<T_2 extends File>(files: T_2[], event: react_dropzone.DropEvent): void;
+    getFilesFromEvent?(event: react_dropzone.DropEvent): Promise<(File | DataTransferItem)[]>;
+    onFileDialogCancel?(): void;
+} & {
+    children: TChildElement<Partial<ChildDropzoneState>>;
+    className?: string | undefined;
+    style?: React__default.CSSProperties | undefined;
+    rootProps?: DropzoneRootProps | undefined;
+    inputProps?: DropzoneInputProps | undefined;
+    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 };

package/dist/index.es.js

@@ -13,6 +13,7 @@ import BaseDatePicker from 'react-datepicker';
 import { useTable, useSortBy, usePagination, useColumnOrder, useBlockLayout, useFlexLayout, useExpanded } from 'react-table';
 import { useSticky } from 'react-table-sticky';
 import { areEqual, FixedSizeList, VariableSizeList } from 'react-window';
+import * as reactIs from 'react-is';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -1189,7 +1190,7 @@ function GearIcon(_a) {
         React.createElement("path", { d: renderPath, fill: color }));
 }
 
-var 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";
+var 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";
 
 var parseColorVars = function (colors, prefix) {
     if (prefix === void 0) { prefix = ''; }
@@ -1569,7 +1570,7 @@ function XIcon(_a) {
 }
 
 function OpportunityCircleIcon(_a) {
-    var _b = _a.variant, variant = _b === void 0 ? "primary" : _b, _c = _a.selected, selected = _c === void 0 ? false : _c, size = _a.size, _d = _a.altText, altText = _d === void 0 ? "Opportunity order stage" : _d, _e = _a.style, style = _e === void 0 ? {} : _e, props = __rest(_a, ["variant", "selected", "size", "altText", "style"]);
+    var _b = _a.variant, variant = _b === void 0 ? "primary" : _b, _c = _a.selected, selected = _c === void 0 ? false : _c, size = _a.size, _d = _a.altText, altText = _d === void 0 ? "Opportunity" : _d, _e = _a.style, style = _e === void 0 ? {} : _e, props = __rest(_a, ["variant", "selected", "size", "altText", "style"]);
     var iconSizes = {
         tiny: {
             width: 24,
@@ -1640,7 +1641,7 @@ function OpportunityCircleIcon(_a) {
 }
 
 function PresentationCircleIcon(_a) {
-    var _b = _a.variant, variant = _b === void 0 ? "primary" : _b, _c = _a.selected, selected = _c === void 0 ? false : _c, size = _a.size, _d = _a.altText, altText = _d === void 0 ? "Presentation order stage" : _d, _e = _a.style, style = _e === void 0 ? {} : _e, props = __rest(_a, ["variant", "selected", "size", "altText", "style"]);
+    var _b = _a.variant, variant = _b === void 0 ? "primary" : _b, _c = _a.selected, selected = _c === void 0 ? false : _c, size = _a.size, _d = _a.altText, altText = _d === void 0 ? "Presentation" : _d, _e = _a.style, style = _e === void 0 ? {} : _e, props = __rest(_a, ["variant", "selected", "size", "altText", "style"]);
     var iconSizes = {
         tiny: {
             width: 24,
@@ -1714,7 +1715,7 @@ function PresentationCircleIcon(_a) {
 }
 
 function EstimateCircleIcon(_a) {
-    var _b = _a.variant, variant = _b === void 0 ? "primary" : _b, _c = _a.selected, selected = _c === void 0 ? false : _c, size = _a.size, _d = _a.altText, altText = _d === void 0 ? "Estimate order stage" : _d, _e = _a.style, style = _e === void 0 ? {} : _e, props = __rest(_a, ["variant", "selected", "size", "altText", "style"]);
+    var _b = _a.variant, variant = _b === void 0 ? "primary" : _b, _c = _a.selected, selected = _c === void 0 ? false : _c, size = _a.size, _d = _a.altText, altText = _d === void 0 ? "Estimate" : _d, _e = _a.style, style = _e === void 0 ? {} : _e, props = __rest(_a, ["variant", "selected", "size", "altText", "style"]);
     var iconSizes = {
         tiny: {
             width: 24,
@@ -1787,7 +1788,7 @@ function EstimateCircleIcon(_a) {
 }
 
 function SalesOrderCircleIcon(_a) {
-    var _b = _a.variant, variant = _b === void 0 ? "primary" : _b, _c = _a.selected, selected = _c === void 0 ? false : _c, size = _a.size, _d = _a.altText, altText = _d === void 0 ? "Sales Order stage" : _d, _e = _a.style, style = _e === void 0 ? {} : _e, props = __rest(_a, ["variant", "selected", "size", "altText", "style"]);
+    var _b = _a.variant, variant = _b === void 0 ? "primary" : _b, _c = _a.selected, selected = _c === void 0 ? false : _c, size = _a.size, _d = _a.altText, altText = _d === void 0 ? "Sales Order" : _d, _e = _a.style, style = _e === void 0 ? {} : _e, props = __rest(_a, ["variant", "selected", "size", "altText", "style"]);
     var iconSizes = {
         tiny: {
             width: 24,
@@ -2934,20 +2935,6 @@ function DropzonedPreviews(_a) {
                 ? React.createElement(ThumbsContainer, null, thumbs)
                 : React.createElement(PlaceHolder, null, placeholder))));
 }
-function DropzonedSimple(_a) {
-    var accept = _a.accept, children = _a.children, props = __rest(_a, ["accept", "children"]);
-    var _b = useDropzone(__assign({ accept: accept }, props)), acceptedFiles = _b.acceptedFiles, getRootProps = _b.getRootProps, getInputProps = _b.getInputProps, isDragActive = _b.isDragActive, isDragAccept = _b.isDragAccept, isDragReject = _b.isDragReject;
-    var Child = React.Children.only(children);
-    if (!Child) {
-        return null;
-    }
-    var ChildElem = React.cloneElement(Child, {
-        acceptedFiles: acceptedFiles,
-        inputProps: getInputProps(),
-        rootProps: getRootProps({ isDragActive: isDragActive, isDragAccept: isDragAccept, isDragReject: isDragReject }),
-    });
-    return ChildElem;
-}
 var templateObject_1$L, templateObject_2$r, templateObject_3$j, templateObject_4$e, templateObject_5$8, templateObject_6$8;
 
 /*
@@ -3692,10 +3679,13 @@ var popupStyles = {
 };
 function skuSelectStyles(props) {
     return {
+        container: function (provided, state) {
+            return __assign(__assign({}, provided), props.containerStyles);
+        },
         clearIndicator: function (provided, state) {
-            return __assign(__assign({}, provided), { color: getThemeColor(props, 'select.clearIcon.color', colors.select.clearIcon.color), ':hover': {
+            return __assign(__assign(__assign({}, provided), { color: getThemeColor(props, 'select.clearIcon.color', colors.select.clearIcon.color), ':hover': {
                     color: getThemeColor(props, 'select.clearIcon.color', colors.select.clearIcon.color),
-                } });
+                } }), props.clearIndicatorStyles);
         },
         dropdownIndicator: function (provided, state) {
             var styles = {
@@ -3711,16 +3701,16 @@ function skuSelectStyles(props) {
             if (state.isDisabled) {
                 styles['color'] = getThemeColor(props, 'select.dropdownIcon.disabled', colors.select.dropdownIcon.disabled);
             }
-            return __assign(__assign({}, provided), styles);
+            return __assign(__assign(__assign({}, provided), styles), props.dropdownIndicatorStyles);
         },
-        indicatorSeparator: function (provided, state) { return (__assign(__assign({}, provided), { display: 'none' })); },
+        indicatorSeparator: function (provided, state) { return (__assign(__assign(__assign({}, provided), { display: 'none' }), props.indicatorSeparatorStyles)); },
         option: function (provided, state) {
-            return (__assign(__assign(__assign({}, provided), (get(state.data, 'styles') || {})), { borderBottom: 'none', padding: 10 }));
+            return __assign(__assign(__assign(__assign({}, provided), (get(state.data, 'styles') || {})), { borderBottom: 'none', padding: 10 }), props.optionStyles);
         },
         input: function (provided, state) {
-            return __assign(__assign({}, provided), { height: 'auto', borderColor: props.error
+            return __assign(__assign(__assign({}, provided), { height: 'auto', borderColor: props.error
                     ? getThemeColor(props, 'select.error.border', colors.select.error.border)
-                    : getThemeColor(props, 'select.border', colors.select.border) });
+                    : getThemeColor(props, 'select.border', colors.select.border) }), props.inputStyles);
         },
         control: function (provided, state) {
             var styles = {
@@ -3760,11 +3750,11 @@ function skuSelectStyles(props) {
                     ? getThemeColor(props, 'select.error.border', colors.select.error.border)
                     : provided.borderColor;
             }
-            return (__assign(__assign(__assign({}, provided), styles), { ':hover': {
+            return (__assign(__assign(__assign(__assign({}, provided), styles), { ':hover': {
                     borderColor: props.error
                         ? getThemeColor(props, 'select.error.border', colors.select.error.border)
                         : getThemeColor(props, 'select.active.border', colors.select.active.border),
-                } }));
+                } }), props.controlStyles));
         },
         menu: function (provided, state) {
             var borderColor = props.error
@@ -3793,21 +3783,21 @@ function skuSelectStyles(props) {
                 styles['marginTop'] = '0px';
                 styles['marginBottom'] = '0px';
             }
-            return (__assign(__assign({}, provided), styles));
+            return __assign(__assign(__assign({}, provided), styles), props.menuStyles);
         },
         menuList: function (provided, state) {
-            return __assign(__assign({}, provided), { paddingBottom: 0 });
+            return __assign(__assign(__assign({}, provided), { paddingBottom: 0 }), props.menuListStyles);
         },
         menuPortal: function (provided, state) {
-            return __assign(__assign({}, provided), { zIndex: 9999 });
+            return __assign(__assign(__assign({}, provided), { zIndex: 9999 }), props.menuPortalStyles);
         },
         singleValue: function (provided, state) {
             var opacity = state.isDisabled ? 0.5 : 1;
             var transition = 'opacity 300ms';
-            return __assign(__assign({}, provided), { opacity: opacity, transition: transition });
+            return __assign(__assign(__assign({}, provided), { opacity: opacity, transition: transition }), props.singleValueStyles);
         },
         valueContainer: function (provided, state) {
-            return __assign(__assign({}, provided), { padding: '2px 8px' });
+            return __assign(__assign(__assign({}, provided), { padding: '2px 8px' }), props.valueContainerStyles);
         },
     };
 }
@@ -3823,9 +3813,9 @@ var SKUSelect = React.forwardRef(function (_a, ref) {
     return React.createElement(BaseSelect, __assign({ ref: ref, classNamePrefix: classNamePrefix }, (inPopup ? popupStyles : {}), { styles: skuSelectStyles(selectStyleProps), theme: skuSelectTheme }, props));
 });
 var LabeledSelect = React.forwardRef(function (_a, ref) {
-    var parentStyle = _a.parentStyle, props = __rest(_a, ["parentStyle"]);
+    var parentStyle = _a.parentStyle, labelStyle = _a.labelStyle, props = __rest(_a, ["parentStyle", "labelStyle"]);
     return (React.createElement("div", { style: parentStyle },
-        React.createElement(Label, { htmlFor: props.name },
+        React.createElement(Label, { htmlFor: props.name, style: labelStyle },
             props.label,
             " ",
             props.required && '*'),
@@ -3839,9 +3829,9 @@ var SKUCreatableSelect = React.forwardRef(function (_a, ref) {
     return (React.createElement(BaseCreatableSelect, __assign({ ref: ref, classNamePrefix: classNamePrefix, styles: skuSelectStyles(selectStyleProps), theme: skuSelectTheme }, props, (inPopup ? popupStyles : {}))));
 });
 var LabeledCreatableSelect = React.forwardRef(function (_a, ref) {
-    var parentStyle = _a.parentStyle, props = __rest(_a, ["parentStyle"]);
+    var parentStyle = _a.parentStyle, labelStyle = _a.labelStyle, props = __rest(_a, ["parentStyle", "labelStyle"]);
     return (React.createElement("div", { style: parentStyle },
-        React.createElement(Label, { htmlFor: props.name },
+        React.createElement(Label, { htmlFor: props.name, style: labelStyle },
             props.label,
             " ",
             props.required && '*'),
@@ -3855,9 +3845,9 @@ var SKUAsyncSelect = React.forwardRef(function (_a, ref) {
     return (React.createElement(BaseAsyncSelect, __assign({ ref: ref, classNamePrefix: classNamePrefix, styles: skuSelectStyles(selectStyleProps), theme: skuSelectTheme }, props, (inPopup ? popupStyles : {}))));
 });
 var LabeledAsyncSelect = React.forwardRef(function (_a, ref) {
-    var parentStyle = _a.parentStyle, props = __rest(_a, ["parentStyle"]);
+    var parentStyle = _a.parentStyle, labelStyle = _a.labelStyle, props = __rest(_a, ["parentStyle", "labelStyle"]);
     return (React.createElement("div", { style: parentStyle },
-        React.createElement(Label, { htmlFor: props.name },
+        React.createElement(Label, { htmlFor: props.name, style: labelStyle },
             props.label,
             " ",
             props.required && '*'),
@@ -5305,11 +5295,12 @@ function HeadlessTable(_a) {
                               }, 1000, { 'trailing': true })
                             } */
                         }, onDrop: column.noDrag ? undefined : onDrop, className: "th", width: column.width, onClick: function () {
+                            var _a, _b, _c;
                             column.isSorted
                                 ? column.isSortedDesc
-                                    ? column.clearSortBy()
-                                    : column.toggleSortBy(true)
-                                : column.toggleSortBy(false);
+                                    ? (_a = column.clearSortBy) === null || _a === void 0 ? void 0 : _a.call(column)
+                                    : (_b = column === null || column === void 0 ? void 0 : column.toggleSortBy) === null || _b === void 0 ? void 0 : _b.call(column, true)
+                                : (_c = column === null || column === void 0 ? void 0 : column.toggleSortBy) === null || _c === void 0 ? void 0 : _c.call(column, false);
                             var direction;
                             if (column.isSorted) {
                                 if (column.isSortedDesc) {
@@ -5361,18 +5352,19 @@ function HeadlessTable(_a) {
                                         scrollOffsetDivRef.current.innerText = scrollOffset;
                                     }
                                 }, onDragStart: onDragStart, onDrop: onDrop, onHeaderColumnClick: function (column) {
+                                    var _a, _b;
                                     var sortDirectionState = {};
                                     if (column.isSorted) {
                                         if (column.isSortedDesc) {
                                             column.clearSortBy();
                                         }
                                         else {
-                                            column.toggleSortBy(true);
+                                            (_a = column === null || column === void 0 ? void 0 : column.toggleSortBy) === null || _a === void 0 ? void 0 : _a.call(column, true);
                                             sortDirectionState = { accessor: column.id, direction: 'DESC' };
                                         }
                                     }
                                     else {
-                                        column.toggleSortBy(false);
+                                        (_b = column === null || column === void 0 ? void 0 : column.toggleSortBy) === null || _b === void 0 ? void 0 : _b.call(column, false);
                                         sortDirectionState = { accessor: column.id, direction: 'ASC' };
                                     }
                                     setSortDirection(sortDirectionState);
@@ -6358,6 +6350,32 @@ var AlertNotification = function (_a) {
 };
 var templateObject_1$c;
 
+var RenderChild = function (_a) {
+    var children = _a.children, parseProps = _a.parseProps, props = __rest(_a, ["children", "parseProps"]);
+    var ChildElement = React.Children.only(children);
+    var elementProps = useMemo(function () {
+        if (typeof ChildElement === 'string'
+            || typeof ChildElement === 'number'
+            || typeof ChildElement === 'boolean'
+            || typeof ChildElement === 'undefined'
+            || ChildElement === null) {
+            return props;
+        }
+        return parseProps ? parseProps(props, ChildElement) : props;
+    }, [parseProps, props, ChildElement]);
+    if (typeof ChildElement === 'string'
+        || typeof ChildElement === 'number'
+        || typeof ChildElement === 'boolean'
+        || typeof ChildElement === 'undefined'
+        || ChildElement === null) {
+        return (React.createElement(React.Fragment, null, ChildElement));
+    }
+    if (reactIs.isElement(ChildElement)) {
+        return React.cloneElement(ChildElement, elementProps);
+    }
+    return (React.createElement(ChildElement, __assign({}, elementProps)));
+};
+
 function useNumberInput(props) {
     var _a = props.defaultValue, defaultValue = _a === void 0 ? "" : _a, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, inputMode = props.inputMode, _b = props.localeOptions, localeOptions = _b === void 0 ? {} : _b;
     var inputRef = useRef(null);
@@ -6445,7 +6463,8 @@ function NumberInput(props) {
             ? React.createElement(LabeledInput, __assign({}, inputProps, { label: label, ref: ref }))
             : React.createElement(Input, __assign({}, inputProps, { ref: ref })),
         icon && type !== 'number'
-            ? React.createElement("span", { style: iconWrapperStyles, onClick: handleClickIcon }, icon)
+            ? React.createElement("span", { style: iconWrapperStyles, onClick: handleClickIcon },
+                React.createElement(RenderChild, null, icon))
             : null));
 }
 
@@ -6562,8 +6581,9 @@ var VirtualTable = function (props) {
         return '100%';
     }, [windowSize, rowsRef]);
     var handleSort = useCallback(function (column) {
+        var _a;
         listRef.current && listRef.current.resetAfterIndex(0);
-        column.toggleSortBy();
+        (_a = column.toggleSortBy) === null || _a === void 0 ? void 0 : _a.call(column);
         onSort && onSort({ column: column });
     }, [onSort]);
     function onListScroll(e) {
@@ -7645,5 +7665,49 @@ var ToggleSwitch = function (_a) {
 };
 var templateObject_1, templateObject_2;
 
-export { AddIcon, AddNoteIcon, AddShoppingCartIcon, AddTaskIcon, AlertIcon, AlertNotification, ArrowIcon, Artwork, SKUAsyncSelect as AsyncSelect, Avatar, AwaitingProofIcon, Backdrop, Background, Badge, BotIcon, Box, BulletIcon, Button, ButtonsGroup, Calendar, CalendarDayBody, CalendarDaysBody, CalendarDaysHeader, CalendarIcon, CalendarTask, CalendarWrapper, CancelButton, ChangeRequestedIcon, ChatIcon, CheckMark, CheckboxIcon, CheckboxLabel, CheckmarkIcon, ChevronIcon, ChevronPopup, CircleProgressIcon, ClientApprovedIcon, ClipboardIcon, ClockIcon, Col, CollaborateIcon, CollapseStyled, CollapseWrapper, Collapsible$1 as Collapsible, CollapsibleArrowIcon, CollapsibleLabel, CollapsiblePanel, CollapsiblePanelTitle, CollapsiblePanels, Collapsible as CollapsibleV2, Collapsibles, Column, ColumnSelectIcon, CommentIcon, CommunityIcon, CompletedCheckmarkIcon, ConfirmAlertPopup, ConfirmPopup, ConnectedIcon, ConnectedPlusIcon, CouponIcon, SKUCreatableSelect as CreatableSelect, CreditCardIcon, Csku, CustomDateInput, Datepicker, DaysBodyWrapper, DaysHeaderWrapper, DefaultCalendarFooter, DefaultCalendarHeader, DefaultStar, DollarIcon, DoneButton, Dot, DoubleArrowIcon, DownloadIcon, DragIcon, DraggableTasksCalendar, DropArea, DropDownContent$2 as DropDownContent, Dropdown, DropdownItem$2 as DropdownItem, Dropzoned, DropzonedPreviews, DropzonedSimple, EPOIcon, EditIcon, EllipsisIcon, EpsIcon, ErrorBoundary, EstimateCircleIcon, EyeIcon, FeedPost, FileUploadIcon, FilledChevronIcon, FolderIcon, GalleryIcon, GearIcon, GlobalStyle, Grid, GridCell, GridIcon, GridItem, GridRow, GridTable, GridTableContainer, H1, H2, H3, H4, H5, H6, HandleIcon, HeaderWrapper, HeadlessTable, HelpIcon, HistoryIcon, IconButton, IconDoc, ImageIcon, Img, InfoIcon, Input, InputIconLabel, InputIconLabelContainer, InputStepper, InputStepperStyled, IntegrationsIcon, InventoryIcon, Label, LabeledAsyncSelect, LabeledCheckbox, LabeledCreatableSelect, LabeledIconInput, LabeledInput, LabeledMultiProgress, LabeledProgress, LabeledRadio, LabeledRadioGroup, LabeledRadioInButton, LabeledRadioInButtonGroup, LabeledSelect, LabeledTextarea, LightIndicator, Link, LinkWithIcon, ListIcon, Loading, LockIcon, MailIcon, MarketingStatusIcon, MenuIcon, MultiProgress, NavConnectIcon, NavFinanceIcon, NavManagementIcon, NavProdIcon, NavResourcesIcon, NavSalesIcon, NoteIcon, Number$1 as Number, NumberInput, OpportunityCircleIcon, OrderStatusIcon, Overlay, Padding, Page, PanelContact, PanelTileContact, PendingApprovalIcon, PercentIcon, PinIcon, Popup, PopupHeader, PresentationCircleIcon, Product, Progress, PromostandardsIcon, ProofReceivedIcon, ProofingCompleteIcon, Publisher, Radio, RadioIcon, RadioLabel, ReceiptLongIcon, ResponsiveTable, Row, SHARED_STYLE_MAPS, SalesArrowIcon, SalesOrderCircleIcon, SearchIcon, SKUSelect as Select, SharedStyles, ShopIcon, ShoppingCartIcon, ShowPopup, SidePanel, SimpleWindowedTable, SimpleWindowedTableStyles, SizerCss, SizerWrapper, Sparkles, Spinner, StarDarkIcon, StarIcon, StarLightIcon, StarRating, StateDropdown, StatusDropdown, StyledCalendarTaskBody, StyledDayBody, StyledDayText, StyledDropArea, StyledDropdown$2 as StyledDropdown, StyledPanel, StyledTask, SubtractIcon, SVG$1 as SvgIcon, TBody, TD$1 as TD, TH, THSorted, THead, TR, Tab, TabBar, Table, TableIcon, Tabs, TargetIcon, Task, TaskBody, TaskIcon, TaskLabel, TaskName, TasksCalendar, TasksCalendarDayBody, TasksCalendarFooter, TasksCalendarHeader, TemplateIcon, Text, Textarea, Theme, Thermometer, TilesIcon, Toggle, ToggleLink, ToggleSwitch, ToggleSwitchStyled, TrashIcon, UploadIcon, UserIcon, UsersIcon, VirtualTable, VirtualTableStyles, Wrapper$4 as Wrapper, XIcon, colors, createMeasurementStyle, datepickerStyles, fontFamilies, fontStyles, fonts, getColor$1 as getColor, getFontStyle, getThemeColor, getThemeFontFamily, getThemeFontSize, getThemeFontStyle, getThemeProperty, parseCskuStyles, sizes, themeOptions, toggleSizes$1 as toggleSizes, useCalendar, useClickOutside, useDelayUnmount, useFallbackRef, useLongPress, usePrefersReducedMotion, useRandomInterval, useWindowSize };
+/**
+ * DropZone
+ *
+ * if `useDropzoneProps={true}` is passed then dropzone options props will passed to child element
+ *
+ * Example with `useDropzoneProps={true}` (dropzone props will be passed in children):
+ * ```
+ * const DropzoneChild = ({ open, ...dropzoneOptions }) => {
+ *   // do something with dropzoneOptions...
+ *   return (
+ *     <>
+ *       <button onClick={open}>Upload</button>
+ *       <div>{draggedFiles.map(f => <div>{f.name (f.type)}</div>)}</div>
+ *     </>
+ *   );
+ * };
+ *
+ * <DropZone useDropzoneProps={true} noClick={true} onDrop={...}>
+ *   <DropzoneChild />
+ * </DropZone>
+ * ```
+ *
+ * ---------------------------------------------------------
+ *
+ * Example without `useDropzoneProps` (dropzone props will NOT be passed in children):
+ * ```
+ * <DropZone onDrop={...}>
+ *   <button onClick={() => {}}>Upload</button>
+ * </DropZone>
+ * ```
+ *
+ */
+var DropZone = React.forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, rootProps = _a.rootProps, inputProps = _a.inputProps, _b = _a.style, style = _b === void 0 ? {} : _b, _c = _a.useDropzoneProps, useDropzoneProps = _c === void 0 ? false : _c, props = __rest(_a, ["children", "className", "rootProps", "inputProps", "style", "useDropzoneProps"]);
+    var _d = useDropzone(props), getRootProps = _d.getRootProps, rootRef = _d.rootRef, getInputProps = _d.getInputProps, inputRef = _d.inputRef, rest = __rest(_d, ["getRootProps", "rootRef", "getInputProps", "inputRef"]);
+    useImperativeHandle(ref, function () { return ({ open: rest.open }); }, [rest.open]);
+    var allRootProps = getRootProps(rootProps);
+    var parseChildProps = useCallback(function (p, Child) { return (useDropzoneProps ? rest : {}); }, [rest, useDropzoneProps]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", __assign({}, allRootProps, { ref: rootRef, className: className, style: __assign(__assign({}, allRootProps.style), style) }),
+            React.createElement("input", __assign({}, getInputProps(inputProps), { ref: inputRef })),
+            React.createElement(RenderChild, { parseProps: parseChildProps }, children))));
+});
+
+export { AddIcon, AddNoteIcon, AddShoppingCartIcon, AddTaskIcon, AlertIcon, AlertNotification, ArrowIcon, Artwork, SKUAsyncSelect as AsyncSelect, Avatar, AwaitingProofIcon, Backdrop, Background, Badge, BotIcon, Box, BulletIcon, Button, ButtonsGroup, Calendar, CalendarDayBody, CalendarDaysBody, CalendarDaysHeader, CalendarIcon, CalendarTask, CalendarWrapper, CancelButton, ChangeRequestedIcon, ChatIcon, CheckMark, CheckboxIcon, CheckboxLabel, CheckmarkIcon, ChevronIcon, ChevronPopup, CircleProgressIcon, ClientApprovedIcon, ClipboardIcon, ClockIcon, Col, CollaborateIcon, CollapseStyled, CollapseWrapper, Collapsible$1 as Collapsible, CollapsibleArrowIcon, CollapsibleLabel, CollapsiblePanel, CollapsiblePanelTitle, CollapsiblePanels, Collapsible as CollapsibleV2, Collapsibles, Column, ColumnSelectIcon, CommentIcon, CommunityIcon, CompletedCheckmarkIcon, ConfirmAlertPopup, ConfirmPopup, ConnectedIcon, ConnectedPlusIcon, CouponIcon, SKUCreatableSelect as CreatableSelect, CreditCardIcon, Csku, CustomDateInput, Datepicker, DaysBodyWrapper, DaysHeaderWrapper, DefaultCalendarFooter, DefaultCalendarHeader, DefaultStar, DollarIcon, DoneButton, Dot, DoubleArrowIcon, DownloadIcon, DragIcon, DraggableTasksCalendar, DropArea, DropDownContent$2 as DropDownContent, DropZone, Dropdown, DropdownItem$2 as DropdownItem, Dropzoned, DropzonedPreviews, EPOIcon, EditIcon, EllipsisIcon, EpsIcon, ErrorBoundary, EstimateCircleIcon, EyeIcon, FeedPost, FileUploadIcon, FilledChevronIcon, FolderIcon, GalleryIcon, GearIcon, GlobalStyle, Grid, GridCell, GridIcon, GridItem, GridRow, GridTable, GridTableContainer, H1, H2, H3, H4, H5, H6, HandleIcon, HeaderWrapper, HeadlessTable, HelpIcon, HistoryIcon, IconButton, IconDoc, ImageIcon, Img, InfoIcon, Input, InputIconLabel, InputIconLabelContainer, InputStepper, InputStepperStyled, IntegrationsIcon, InventoryIcon, Label, LabeledAsyncSelect, LabeledCheckbox, LabeledCreatableSelect, LabeledIconInput, LabeledInput, LabeledMultiProgress, LabeledProgress, LabeledRadio, LabeledRadioGroup, LabeledRadioInButton, LabeledRadioInButtonGroup, LabeledSelect, LabeledTextarea, LightIndicator, Link, LinkWithIcon, ListIcon, Loading, LockIcon, MailIcon, MarketingStatusIcon, MenuIcon, MultiProgress, NavConnectIcon, NavFinanceIcon, NavManagementIcon, NavProdIcon, NavResourcesIcon, NavSalesIcon, NoteIcon, Number$1 as Number, NumberInput, OpportunityCircleIcon, OrderStatusIcon, Overlay, Padding, Page, PanelContact, PanelTileContact, PendingApprovalIcon, PercentIcon, PinIcon, Popup, PopupHeader, PresentationCircleIcon, Product, Progress, PromostandardsIcon, ProofReceivedIcon, ProofingCompleteIcon, Publisher, Radio, RadioIcon, RadioLabel, ReceiptLongIcon, RenderChild, ResponsiveTable, Row, SHARED_STYLE_MAPS, SalesArrowIcon, SalesOrderCircleIcon, SearchIcon, SKUSelect as Select, SharedStyles, ShopIcon, ShoppingCartIcon, ShowPopup, SidePanel, SimpleWindowedTable, SimpleWindowedTableStyles, SizerCss, SizerWrapper, Sparkles, Spinner, StarDarkIcon, StarIcon, StarLightIcon, StarRating, StateDropdown, StatusDropdown, StyledCalendarTaskBody, StyledDayBody, StyledDayText, StyledDropArea, StyledDropdown$2 as StyledDropdown, StyledPanel, StyledTask, SubtractIcon, SVG$1 as SvgIcon, TBody, TD$1 as TD, TH, THSorted, THead, TR, Tab, TabBar, Table, TableIcon, Tabs, TargetIcon, Task, TaskBody, TaskIcon, TaskLabel, TaskName, TasksCalendar, TasksCalendarDayBody, TasksCalendarFooter, TasksCalendarHeader, TemplateIcon, Text, Textarea, Theme, Thermometer, TilesIcon, Toggle, ToggleLink, ToggleSwitch, ToggleSwitchStyled, TrashIcon, UploadIcon, UserIcon, UsersIcon, VirtualTable, VirtualTableStyles, Wrapper$4 as Wrapper, XIcon, colors, createMeasurementStyle, datepickerStyles, fontFamilies, fontStyles, fonts, getColor$1 as getColor, getFontStyle, getThemeColor, getThemeFontFamily, getThemeFontSize, getThemeFontStyle, getThemeProperty, parseCskuStyles, sizes, themeOptions, toggleSizes$1 as toggleSizes, useCalendar, useClickOutside, useDelayUnmount, useFallbackRef, useLongPress, usePrefersReducedMotion, useRandomInterval, useWindowSize };
 //# sourceMappingURL=index.es.js.map