@commonsku/styles 1.16.5 → 1.16.7

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import React$1, { CSSProperties, MouseEvent, Component, MouseEventHandler, ReactNode, WeakValidationMap, ComponentType, Dispatch, SetStateAction, MutableRefObject, ForwardedRef } from 'react';
-import { FlattenInterpolation, ThemedStyledProps, StyledComponent, CSSObject, FlattenSimpleInterpolation, GlobalStyleComponent, DefaultTheme, ThemeProps, Keyframes, AnyStyledComponent, StyledComponentInnerComponent } from 'styled-components';
+import React$1, { CSSProperties, MouseEvent, Component, ReactEventHandler, MouseEventHandler, ReactNode, WeakValidationMap, ComponentType, Dispatch, SetStateAction, MutableRefObject, ForwardedRef } from 'react';
+import { FlattenInterpolation, ThemedStyledProps, StyledComponent, CSSObject, FlattenSimpleInterpolation, GlobalStyleComponent, DefaultTheme, ThemeProps, CSSProperties as CSSProperties$1, Keyframes, AnyStyledComponent, StyledComponentInnerComponent } from 'styled-components';
 import { DropzoneOptions } from 'react-dropzone';
 import { AsyncAdditionalProps } from 'react-select/dist/declarations/src/useAsync';
 import { CreatableAdditionalProps } from 'react-select/dist/declarations/src/useCreatable';
@@ -294,6 +294,17 @@ declare const H6: StyledComponent<"h6", any, {
 } & SharedStyleTypes, never>;
 //# sourceMappingURL=Headings.d.ts.map
 
+declare type ImgProps = {
+    src?: string;
+    alt?: string;
+    max_attempts?: number;
+    attempt_interval?: number;
+    onRetry?: OnErrorEventHandler;
+    onFailed?: OnErrorEventHandler;
+} & React$1.DetailedHTMLProps<React$1.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>;
+declare const Img: React$1.ForwardRefExoticComponent<Pick<ImgProps, "max_attempts" | "attempt_interval" | "onRetry" | "onFailed" | "key" | keyof React$1.ImgHTMLAttributes<HTMLImageElement>> & React$1.RefAttributes<HTMLImageElement>>;
+//# sourceMappingURL=Img.d.ts.map
+
 declare const iconSize: {
     tiny: {
         width: number;
@@ -433,7 +444,9 @@ declare const LabeledIconInput: React$1.ForwardRefExoticComponent<React$1.InputH
     labelOnTop?: boolean | undefined;
     Icon: React$1.ReactElement;
     iconPosition?: "left" | "right" | undefined;
+    iconColor?: string | undefined;
     iconLabelStyles?: React$1.CSSProperties | undefined;
+    containerStyle?: React$1.CSSProperties | undefined;
 } & React$1.RefAttributes<HTMLInputElement>>;
 declare const CheckboxLabel: StyledComponent<"label", any, {
     disabled?: boolean | undefined;
@@ -1201,22 +1214,23 @@ declare const tabSizes: {
 declare const TabBar: StyledComponent<"ul", any, {
     padded?: boolean | undefined;
 } & SharedStyleTypes, never>;
+declare type CommonTabProps = {
+    size?: keyof typeof tabSizes;
+    variant?: 'primary' | 'secondary';
+};
 declare const Tab: StyledComponent<"li", any, {
     selected?: boolean | undefined;
-    size?: "small" | "medium" | undefined;
-    variant?: "primary" | "secondary" | undefined;
-} & SharedStyleTypes, never>;
+} & CommonTabProps & SharedStyleTypes, never>;
 declare type TTab = {
     label: string | React$1.ReactNode;
     content: React$1.ReactNode;
     onClick?: (e?: MouseEvent<HTMLLIElement>) => void;
-};
+} & CommonTabProps;
 declare type TabsProps = {
     tabs: TTab[];
     selectedTabIndex?: number;
     padded?: boolean;
-    size?: keyof typeof tabSizes;
-};
+} & CommonTabProps;
 declare type TabsState = {
     selectedTabIndex: number;
 };
@@ -1310,12 +1324,12 @@ declare type ArtworkProps = {
     onEdit?: Function | VoidFunction;
     onDelete?: Function | VoidFunction;
     onSave?: Function | VoidFunction;
-    onError?: Function | VoidFunction;
+    onError?: ReactEventHandler<HTMLImageElement>;
     onDownload?: Function | VoidFunction;
     inputProps?: InputProps;
     inputEl?: React$1.ReactNode;
 };
-declare const Artwork: ({ inputProps, ...props }: ArtworkProps & SharedStyleTypes) => JSX.Element;
+declare const Artwork: ({ inputProps, onError, ...props }: ArtworkProps & SharedStyleTypes) => JSX.Element;
 
 declare const StarRating: (props: {
     rating: number;
@@ -1360,6 +1374,8 @@ declare type PopupProps = React$1.PropsWithChildren<{
     padding?: string;
     zIndex?: number;
     overlayZIndex?: number;
+    popupClassName?: string;
+    contentClassName?: string;
 } & SharedStyleTypes> & React$1.HTMLAttributes<HTMLDivElement>;
 declare const Popup: React$1.ForwardRefExoticComponent<{
     header?: React$1.Component<{}, {}, any> | undefined;
@@ -1375,6 +1391,8 @@ declare const Popup: React$1.ForwardRefExoticComponent<{
     padding?: string | undefined;
     zIndex?: number | undefined;
     overlayZIndex?: number | undefined;
+    popupClassName?: string | undefined;
+    contentClassName?: string | undefined;
 } & SharedStyleTypes & {
     children?: React$1.ReactNode;
 } & React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
@@ -2773,7 +2791,24 @@ declare type InputStepperProps = Omit<NumberInputProps, 'value'> & {
     label?: string;
     labelStyle?: React$1.CSSProperties;
     inputDisabled?: boolean;
+    delayChangeTimeout?: number;
+    holdIncrement?: boolean;
+    holdDecrement?: boolean;
+};
+declare type InputStepperStyledProps = Omit<NumberInputProps, 'onChange'> & {
+    onCHange?: React$1.ChangeEventHandler<HTMLInputElement>;
+    containerWidth?: string;
+    style?: CSSProperties$1;
+    label?: string;
+    labelStyle?: React$1.CSSProperties;
+    containerStyle?: React$1.CSSProperties;
+    inputDisabled?: boolean;
+    decrementButtonProps?: IconButtonProps;
+    incrementButtonProps?: IconButtonProps;
+    onIncrement?: React$1.MouseEventHandler<HTMLButtonElement>;
+    onDecrement?: React$1.MouseEventHandler<HTMLButtonElement>;
 };
+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> {
@@ -2884,6 +2919,17 @@ declare type BaseCskuProps = {
     grid?: ResponsiveValue<boolean>;
     float?: ResponsiveValue<string>;
     colSpan?: ResponsiveValue<string | number | boolean>;
+    __after?: ResponsiveValue<CSSObject>;
+    __before?: ResponsiveValue<CSSObject>;
+    __firstLetter?: ResponsiveValue<CSSObject>;
+    __firstLine?: ResponsiveValue<CSSObject>;
+    __active?: ResponsiveValue<CSSObject>;
+    __firstChild?: ResponsiveValue<CSSObject>;
+    __focus?: ResponsiveValue<CSSObject>;
+    __hover?: ResponsiveValue<CSSObject>;
+    __lang?: ResponsiveValue<CSSObject>;
+    __link?: ResponsiveValue<CSSObject>;
+    __visited?: ResponsiveValue<CSSObject>;
     style?: ResponsiveValue<CSSObject>;
     sx?: ResponsiveValue<CSSObject>;
 };
@@ -3281,6 +3327,27 @@ declare function HistoryIcon({ color, size, altText, ...props }: HistoryIcon): J
 declare type HandleIcon = SVGIconProps;
 declare function HandleIcon({ color, size, altText, ...props }: HandleIcon): JSX.Element;
 
+declare type CommunityIconProps = SVGIconProps;
+declare function CommunityIcon({ size, altText, ...props }: CommunityIconProps): JSX.Element;
+
+declare type ConnectedIconProps = SVGIconProps;
+declare function ConnectedIcon({ size, altText, ...props }: ConnectedIconProps): JSX.Element;
+
+declare type ConnectedPlusIconProps = SVGIconProps;
+declare function ConnectedPlusIcon({ size, altText, ...props }: ConnectedPlusIconProps): JSX.Element;
+
+declare type CollaborateIconProps = SVGIconProps;
+declare function CollaborateIcon({ color, size, altText, ...props }: CollaborateIconProps): JSX.Element;
+
+declare type InventoryIconProps = SVGIconProps;
+declare function InventoryIcon({ color, size, altText, ...props }: InventoryIconProps): JSX.Element;
+
+declare type OrderStatusIconProps = SVGIconProps;
+declare function OrderStatusIcon({ color, size, altText, ...props }: OrderStatusIconProps): JSX.Element;
+
+declare type EPOIconProps = SVGIconProps;
+declare function EPOIcon({ color, size, altText, ...props }: EPOIconProps): JSX.Element;
+
 declare const datepickerStyles = "\n.commonsku-styles-datepicker {\n  &.react-datepicker-wrapper {\n    width: 100%;\n  }\n\n  .react-datepicker__input-container {\n    display: block;\n    width: 100%;\n  }\n\n  .react-datepicker {\n    border: 1px solid var(--color-primary1-60);\n    outline: none;\n    box-shadow: 1px  1px 0px var(--color-primary1-60),\n              -1px -1px 0px var(--color-primary1-60),\n              1px -1px 0px var(--color-primary1-60),\n              -1px  1px 0px var(--color-primary1-60);\n  }\n\n  .react-datepicker__current-month,\n  .react-datepicker-time__header,\n  .react-datepicker-year-header,\n  .react-datepicker__header {\n    padding-top: 8px;\n    padding-bottom: 8px;\n  }\n\n  .react-datepicker__header,\n  .react-datepicker__today-button {\n    background: var(--color-neutrals-20);\n    padding-top: 8px;\n    padding-bottom: 8px;\n  }\n\n  .react-datepicker__header {\n    border-bottom: none;\n  }\n\n  .react-datepicker__today-button {\n    border-top: none;\n  }\n\n  .react-datepicker__day {\n    outline: none;\n  }\n\n  .react-datepicker__day :not(\n    .react-datepicker__day--outside-month,\n    .react-datepicker__day--selected\n  ) {\n    color: var(--color-neutrals-90);\n  }\n\n  .react-datepicker__day:hover :not(.react-datepicker__day--selected),\n  .react-datepicker__month-text:hover,\n  .react-datepicker__quarter-text:hover,\n  .react-datepicker__year-text:hover {\n    background-color: var(--color-neutrals-20);\n  }\n\n  .react-datepicker__day--outside-month {\n    color: var(--color-neutrals-70);\n  }\n\n  .react-datepicker__day--weekend {\n    color: var(--color-errors-main);\n  }\n\n  .react-datepicker__day--selected,\n  .react-datepicker__day--keyboard-selected,\n  .react-datepicker__month-text--keyboard-selected,\n  .react-datepicker__quarter-text--keyboard-selected,\n  .react-datepicker__year-text--keyboard-selected\n   {\n    background-color: var(--color-primary1-60);\n    color: #fff;\n  }\n\n  .react-datepicker__triangle {\n    border-bottom-color: var(--color-neutrals-20) !important;\n  }\n\n  .react-datepicker__triangle::before {\n    border-bottom-color: var(--color-primary1-60) !important;\n    border-top-color: var(--color-primary1-60) !important;\n  }\n\n  .react-datepicker__month-select,\n  .react-datepicker__year-select {\n    height: 30px;\n    border: 2px solid var(--color-primary1-60);\n    padding: 3px;\n    border-radius: 5px;\n    outline: none;\n  }\n\n  .react-datepicker__navigation {\n    border: 0.45rem solid transparent;\n\n    &.react-datepicker__navigation--next {\n      border-left: 7px solid var(--color-primary1-60);\n      margin-top: 8px;\n    }\n  \n    &.react-datepicker__navigation--previous {\n      border-right: 7px solid var(--color-primary1-60);\n      margin-top: 8px;\n    }\n  }\n}\n";
 //# sourceMappingURL=datepickerStyles.d.ts.map
 
@@ -3622,4 +3689,4 @@ declare const useClickOutside: <T extends HTMLElement = HTMLElement>(props: {
 declare const useFallbackRef: <T>(forwardedRef: ForwardedRef<T>) => MutableRefObject<T | null>;
 //# sourceMappingURL=useFallbackRef.d.ts.map
 
-export { AddIcon, AddNoteIcon, 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, CircleProgressIcon, ClientApprovedIcon, ClipboardIcon, ClockIcon, Col, ColPropTypes, CollapseStyled, CollapseStyledProps, CollapseWrapper, CollapseWrapperProps, Collapsible, CollapsibleArrowIcon, CollapsibleLabel, CollapsiblePanel, CollapsiblePanelProps, CollapsiblePanelTitle, CollapsiblePanelTitleProps, CollapsiblePanels, CollapsiblePanelsProps, CollapsibleProps, Collapsible$1 as CollapsibleV2, Collapsibles, Column, ColumnSelectIcon, CommentIcon, CompletedCheckmarkIcon, ConfirmPopup, CouponIcon, SKUCreatableSelect as CreatableSelect, CreditCardIcon, Csku, CskuProps, CustomDateInput, Datepicker, DatepickerPorps, DaysBodyWrapper, DaysHeaderWrapper, DefaultCalendarFooter, DefaultCalendarHeader, DefaultStar, DollarIcon, DoneButton, Dot, DownloadIcon, DragIcon, DraggableTasksCalendar, DropArea, DropAreaProps, DropDownContent, Dropdown, DropdownItem, DropdownProps, DropzoneTypes, Dropzoned, DropzonedPreviews, EditIcon, EllipsisIcon, EpsIcon, ErrorBoundary, EstimateCircleIcon, EyeIcon, FeedPost, FilledChevronIcon, FolderIcon, GalleryIcon, GearIcon, GlobalStyle, Grid, GridCell, GridIcon, GridItem, GridItemProps, GridProps, GridRow, GridTable, GridTableContainer, H1, H2, H3, H4, H5, H6, HandleIcon, HeaderWrapper, HeadlessTable, HistoryIcon, IconButton, IconButtonProps, IconDoc, InfoIcon, Input, InputIconLabel, InputIconLabelContainer, InputProps, InputStepper, IntegrationsIcon, 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, 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, RowPropTypes, SHARED_STYLE_MAPS, SalesArrowIcon, SalesOrderCircleIcon, SearchIcon, SKUSelect as Select, SharedStyleTypes, SharedStyles, ShopIcon, ShowPopup, SidePanel, SimpleWindowedTable, SimpleWindowedTableProps, SimpleWindowedTableStyles, SizerCss, SizerTypes, SizerWrapper, Sparkles, Spinner, StarIcon, StarRating, StateDropdown, StatusDropdown, StyledCalendarTaskBody, StyledDayBody, StyledDayText, StyledDropArea, StyledDropdown, StyledPanel, StyledTask, SubtractIcon, SVG as SvgIcon, TBody, TButtonIcon, TD, TDropdownItem, TH, THSorted, THead, TR, TSize$1 as TSize, TSizeOffset, TSizeOffsetRight, TSizeStyle, TTab, Tab, TabBar, Table, TableIcon, Tabs, TabsProps, TargetIcon, Task, TaskBody, TaskIcon, TaskLabel, TaskName, TaskProps, TasksCalendar, TasksCalendarDayBody, TasksCalendarFooter, TasksCalendarHeader, TemplateIcon, Text, TextProp, Textarea, Theme, Thermometer, TilesIcon, Toggle, ToggleLink, TrashIcon, UserIcon, UsersIcon, VirtualTable, VirtualTableStyles, Wrapper, XIcon, colors, createMeasurementStyle, datepickerStyles, fontFamilies, fontStyles, fonts, getColor, getFontStyle, getThemeColor, getThemeFontFamily, getThemeFontSize, getThemeFontStyle, getThemeProperty, parseCskuStyles, sizes, themeOptions, toggleSizes, useCalendar, useClickOutside, useDelayUnmount, useFallbackRef, useLongPress, usePrefersReducedMotion, useRandomInterval, useWindowSize };
+export { AddIcon, AddNoteIcon, 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, CircleProgressIcon, ClientApprovedIcon, ClipboardIcon, ClockIcon, Col, ColPropTypes, CollaborateIcon, CollapseStyled, CollapseStyledProps, CollapseWrapper, CollapseWrapperProps, Collapsible, CollapsibleArrowIcon, CollapsibleLabel, CollapsiblePanel, CollapsiblePanelProps, CollapsiblePanelTitle, CollapsiblePanelTitleProps, CollapsiblePanels, CollapsiblePanelsProps, CollapsibleProps, Collapsible$1 as CollapsibleV2, Collapsibles, Column, ColumnSelectIcon, CommentIcon, CommunityIcon, CompletedCheckmarkIcon, ConfirmPopup, ConnectedIcon, ConnectedPlusIcon, CouponIcon, SKUCreatableSelect as CreatableSelect, CreditCardIcon, Csku, CskuProps, CustomDateInput, Datepicker, DatepickerPorps, DaysBodyWrapper, DaysHeaderWrapper, DefaultCalendarFooter, DefaultCalendarHeader, DefaultStar, DollarIcon, DoneButton, Dot, DownloadIcon, DragIcon, DraggableTasksCalendar, DropArea, DropAreaProps, DropDownContent, Dropdown, DropdownItem, DropdownProps, DropzoneTypes, Dropzoned, DropzonedPreviews, EPOIcon, EditIcon, EllipsisIcon, EpsIcon, ErrorBoundary, EstimateCircleIcon, EyeIcon, FeedPost, FilledChevronIcon, FolderIcon, GalleryIcon, GearIcon, GlobalStyle, Grid, GridCell, GridIcon, GridItem, GridItemProps, GridProps, GridRow, GridTable, GridTableContainer, H1, H2, H3, H4, H5, H6, HandleIcon, HeaderWrapper, HeadlessTable, HistoryIcon, IconButton, IconButtonProps, IconDoc, 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, RowPropTypes, SHARED_STYLE_MAPS, SalesArrowIcon, SalesOrderCircleIcon, SearchIcon, SKUSelect as Select, SharedStyleTypes, SharedStyles, ShopIcon, ShowPopup, SidePanel, SimpleWindowedTable, SimpleWindowedTableProps, SimpleWindowedTableStyles, SizerCss, SizerTypes, SizerWrapper, Sparkles, Spinner, StarIcon, StarRating, StateDropdown, StatusDropdown, StyledCalendarTaskBody, StyledDayBody, StyledDayText, StyledDropArea, StyledDropdown, StyledPanel, StyledTask, SubtractIcon, SVG as SvgIcon, TBody, TButtonIcon, TD, TDropdownItem, TH, THSorted, THead, TR, TSize$1 as TSize, TSizeOffset, TSizeOffsetRight, TSizeStyle, TTab, Tab, TabBar, Table, TableIcon, Tabs, TabsProps, TargetIcon, Task, TaskBody, TaskIcon, TaskLabel, TaskName, TaskProps, TasksCalendar, TasksCalendarDayBody, TasksCalendarFooter, TasksCalendarHeader, TemplateIcon, Text, TextProp, Textarea, Theme, Thermometer, TilesIcon, Toggle, ToggleLink, TrashIcon, UserIcon, UsersIcon, VirtualTable, VirtualTableStyles, Wrapper, XIcon, colors, createMeasurementStyle, datepickerStyles, fontFamilies, fontStyles, fonts, getColor, getFontStyle, getThemeColor, getThemeFontFamily, getThemeFontSize, getThemeFontStyle, getThemeProperty, parseCskuStyles, sizes, themeOptions, toggleSizes, useCalendar, useClickOutside, useDelayUnmount, useFallbackRef, useLongPress, usePrefersReducedMotion, useRandomInterval, useWindowSize };