@commonsku/styles 1.17.47 → 1.17.48

package/dist/index.d.ts

@@ -6,7 +6,7 @@ import * as styled_components from 'styled-components';
 import { CSSObject, DefaultTheme, ThemeProps, CSSProperties as CSSProperties$1, StyledComponent } from 'styled-components';
 import * as react_dropzone from 'react-dropzone';
 import { DropzoneOptions, DropzoneRootProps, DropzoneInputProps, DropzoneRef, DropzoneState } from 'react-dropzone';
-import { GroupBase, Props, SelectInstance, PropsValue, OnChangeValue, ActionMeta } from 'react-select';
+import { GroupBase, Props as Props$2, SelectInstance, PropsValue, OnChangeValue, ActionMeta } from 'react-select';
 export { components, createFilter, mergeStyles } from 'react-select';
 import { CreatableProps } from 'react-select/creatable';
 import { AsyncProps } from 'react-select/async';
@@ -596,7 +596,7 @@ type TBaseOption = {
     value: string;
     isDisabled?: boolean;
 };
-type SKUSelectProps<Option = TBaseOption, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> = AdditionalSKUSelectProps & Props<Option, IsMulti, Group>;
+type SKUSelectProps<Option = TBaseOption, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> = AdditionalSKUSelectProps & Props$2<Option, IsMulti, Group>;
 type SKUAsyncSelectProps<Option = TBaseOption, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> = AdditionalSKUSelectProps & AsyncProps<Option, IsMulti, Group>;
 type SKUCreatableSelectProps<Option = TBaseOption, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> = AdditionalSKUSelectProps & CreatableProps<Option, IsMulti, Group>;
 type CommonLabelProps = {
@@ -2823,13 +2823,15 @@ declare function Loading({ height, width, animationDuration, barWidth, barRadius
 
 type SkubotSpinnerProps = {
     size?: TIconSize | "button";
+    spinnerSize?: TIconSize | number;
     width?: string | number;
     height?: string | number;
     altText?: string;
     color?: string | undefined;
     skubot?: boolean;
+    style?: React__default.CSSProperties;
 } & SharedStyleTypes;
-declare function SkubotSpinner({ color, size, altText, skubot, ...props }: SkubotSpinnerProps): React__default.JSX.Element;
+declare function SkubotSpinner({ color, size, altText, skubot, style, spinnerSize, ...props }: SkubotSpinnerProps): React__default.JSX.Element;
 
 type CommonskuMainLogoProps = {
     size?: TIconSize;
@@ -3141,6 +3143,12 @@ declare function ClearIcon({ color, size, altText, ...props }: SVGIconProps): Re
 type AnnounceIcon = SVGIconProps;
 declare function AnnounceIcon({ color, size, altText, ...props }: AnnounceIcon): React__default.JSX.Element;
 
+type Props$1 = SVGIconProps;
+declare function CellphoneIcon({ color, size, altText, ...props }: Props$1): React__default.JSX.Element;
+
+type Props = SVGIconProps;
+declare function MonitorIcon({ color, size, altText, ...props }: Props): React__default.JSX.Element;
+
 declare const datepickerStyles = "\n.react-datepicker {\n  font-family: \"skufont-demibold\", sans-serif;\n  color: var(--color-neutrals-dark);\n}\n\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-radius: 3px;\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  /* For date ranges */\n  &.daterangepicker {\n    .react-datepicker__day--range-start,\n    .react-datepicker__day--range-end,\n    .react-datepicker__day:hover\n    {\n      background-color: var(--color-primary1-60);\n      color: #fff;\n    }\n\n    .react-datepicker__day--in-range:not(\n      .react-datepicker__day--range-start,\n      .react-datepicker__day--range-end,\n      .react-datepicker__day:hover\n    )\n    {\n      background-color: var(--color-primary1-40);\n    }\n\n    .react-datepicker__day--in-range:not(\n      .react-datepicker__day--in-selecting-range,\n      .react-datepicker__day--weekend,\n      .react-datepicker__day--selected\n    )\n    {\n      color: var(--color-neutrals-dark);\n    }\n\n    .react-datepicker__day--in-range.react-datepicker__day--weekend:not(\n      .react-datepicker__day--selected,\n      .react-datepicker__day--range-start,\n      .react-datepicker__day--range-end,\n      .react-datepicker__day:hover\n    )\n    {\n      color: var(--color-errors-main);\n    }\n\n    .react-datepicker__day--in-selecting-range:not(\n      .react-datepicker__day--range-start,\n      .react-datepicker__day--range-end,\n      .react-datepicker__day:hover\n    )\n    {\n      background-color: var(--color-primary1-40);\n      &.react-datepicker__day:not(\n        .react-datepicker__day--outside-month,\n        .react-datepicker__day--weekend,\n      ) {\n        color: var(--color-neutrals-90);\n      }\n      &.react-datepicker__day--outside-month {\n        color: var(--color-neutrals-70);\n      }\n      &.react-datepicker__day--weekend {\n        color: var(--color-errors-main);\n      }\n    }\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    color: var(--color-neutrals-dark);\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  {\n    outline: none;\n    color: var(--color-neutrals-dark);\n  }\n\n  .react-datepicker__day-name {\n    color: var(--color-neutrals-dark);\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__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__day--keyboard-selected {\n    background-color: inherit;\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-icon {\n    &.react-datepicker__navigation-icon--next::before {\n      content: '';\n      box-sizing: initial;\n      top: 2px;\n      left: -8px;\n      height: 6px;\n      width: 6px;\n      border-width: 3px 3px 0 0;\n      border-top-right-radius: 2px;\n      border-color: var(--color-primary1-60);\n    }\n\n    &.react-datepicker__navigation-icon--previous::before {\n      content: '';\n      box-sizing: initial;\n      top: 2px;\n      right: -8px;\n      height: 6px;\n      width: 6px;\n      border-width: 3px 3px 0 0;\n      border-top-right-radius: 2px;\n      border-color: var(--color-primary1-60);\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 .react-datepicker__month-container .react-datepicker__month {\n      overflow-y: scroll;\n      max-height: 140px;\n    }\n  }\n  @media only screen and (max-height: 599px ) {\n    .react-datepicker .react-datepicker__month-container .react-datepicker__month {\n      overflow-y: scroll;\n      max-height: 110px;\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
 
@@ -3693,4 +3701,4 @@ type SwitchStatedProps = {
 declare const SwitchStyled: ({ onClick, size, selected, stretch, style, ...props }: SwitchProps) => React__default.JSX.Element;
 declare const Switch: ({ size, initialSelected, stretch, onClick, ...props }: SwitchStatedProps) => React__default.JSX.Element;
 
-export { AddIcon, AddNoteIcon, AddShoppingCartIcon, AddTaskIcon, AddressAutocompleteInput, AlertIcon, AlertNotification, AnnounceIcon, 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, ClearIcon, 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, CommentBubbleIcon, CommentIcon, CommonskuMainLogo, CommunityIcon, CompletedCheckmarkIcon, ConfirmAlertPopup, ConfirmPopup, ConnectedIcon, ConnectedPlusIcon, CopyIcon, CouponIcon, SKUCreatableSelect as CreatableSelect, CreditCardIcon, Csku, CskuProps, CustomDateInput, DateRange, DateRangeDropdown, DateRangeDropdownProps, DateRangeInput, DateRangeInputProps, DateRangePicker, DateRangePickerProps, DateRangePreset, Datepicker, DaysBodyWrapper, DebouncedInput, DefaultCalendarFooter, DefaultCalendarHeader, DefaultStar, DesignIcon, DollarIcon, DoneButton, Dot, DoubleArrowIcon, DownloadIcon, DragIcon, DraggableTasksCalendar, DropArea, DropAreaProps, DropDownContent, Dropdown, DropdownItem, DropdownProps, Dropzone, DropzoneProps, DropzoneTypes, Dropzoned, DropzonedPreviews, EPOIcon, EditIcon, EllipsisIcon, EmptyStateArrowIcon as EmptyStateArrow, EpsIcon, ErrorBoundary, EstimateCircleIcon, EyeIcon, FeedPost, FileUploadIcon, FilledChevronIcon, FolderIcon, GalleryIcon, GearIcon, GlobalStyle, Grid, GridCell, GridIcon, GridItem, GridItemProps, GridProps, GridRow, GridTable, GridTableContainer, H1$1 as H1, H2$1 as H2, H3, H4, H5$1 as H5, H6, HandleIcon, HeadlessTable, HelpIcon, HistoryIcon, IconButton, IconButtonProps, IconDoc, ImageIcon, Img, InfoIcon, Input, InputDropdown, InputIconLabel, InputIconLabelContainer, InputProps, InputStepper, InputStepperStyled, IntegrationsIcon, InventoryIcon, Label, LabeledAsyncSelect, LabeledCheckbox, LabeledCheckboxProps, LabeledCreatableSelect, LabeledIconInput, LabeledInput, LabeledInputProps, LabeledMultiProgress, LabeledProgress, LabeledRadio, LabeledRadioGroup, LabeledRadioInButton, LabeledRadioInButtonGroup, LabeledRadioProps, LabeledSelect, LabeledTextarea, LayersIcon, LightIndicator, Link, LinkWithIcon, ListIcon, Loading, LockIcon, MagicEraserIcon, MagicIcon, MailIcon, MarketingStatusIcon, MeetingIcon, MenuIcon, MergeIcon, MultiProgress, NavConnectIcon, NavFinanceIcon, NavManagementIcon, NavProdIcon, NavReportsIcon, NavResourcesIcon, NavSalesIcon, NestedOption, NoteIcon, Number, NumberInput, OpportunityCircleIcon, OrderStatusIcon, Overlay, Padding, Page, Pagination, PanelContact, PanelTileContact, PanelledSelect, PanelledSelectProps, PendingApprovalIcon, PercentIcon, PhoneIcon, PinIcon, Popup, PopupHeader, PopupProps, PresentationCircleIcon, Product, ProductCard, ProductDetail, Progress, PromostandardsIcon, ProofReceivedIcon, ProofingCompleteIcon, Publisher, Radio, RadioIcon, RadioLabel, RadioProps, ReceiptLongIcon, RenderChild, ResizableIcon, ResponsiveTable, Row$1 as Row, RowPropTypes, SHARED_STYLE_MAPS, SalesArrowIcon, SalesOrderCircleIcon, SearchIcon, SKUSelect as Select, SelectionTable, SharedStyleTypes, SharedStyles, ShopIcon, ShoppingCartIcon, ShowPopup, SidePanel, SimpleWindowedTable, SimpleWindowedTableProps, SimpleWindowedTableStyles, SizerCss, SizerTypes, SizerWrapper, SkubotLogo, SkubotSpinner, SlideInIcon, Sparkles, Spinner, StarDarkIcon, StarIcon, StarLightIcon, StarRating, StateDropdown, StatusDropdown, StyledCalendarTaskBody, StyledDropArea, StyledDropdown, StyledPanel, StyledTask, SubtractIcon, SVG as SvgIcon, Switch, SwitchProps, SwitchStatedProps, SwitchStyled, TBody, TButtonIcon, TD, TDropdownItem, TH, THSorted, THead, TR, TSize, TSizeOffset, TSizeOffsetRight, TSizeStyle, TTab, Tab, TabBar, Table, TableIcon, Tabs, TabsProps, TagIcon, TargetIcon, Task, TaskBody, TaskIcon, TaskLabel, TaskName, TaskProps, TasksCalendar, TasksCalendarDayBody, TasksCalendarFooter, TemplateIcon, Text$1 as Text, TextProp, Textarea, Theme, Thermometer, TilesIcon, Toggle, ToggleLink, ToggleSwitch, ToggleSwitchProps, ToggleSwitchStatedProps, ToggleSwitchStyled, Tooltip, TrashIcon, TrendIcon, Typography, UploadIcon, UserIcon, UsersIcon, VirtualTable, VirtualTableStyles, WarnIcon, Wrapper, XIcon, colors, createMeasurementStyle, datepickerStyles, fontFamilies, fontStyles, fonts, getColor, getFontStyle, getThemeColor, getThemeFontFamily, getThemeFontSize, getThemeFontStyle, getThemeProperty, parseCskuStyles, sizes, themeOptions, toggleSizes$2 as toggleSizes, useCalendar, useClickOutside, useDelayUnmount, useFallbackRef, useLongPress, usePrefersReducedMotion, useRandomInterval, useValue, useWindowSize };
+export { AddIcon, AddNoteIcon, AddShoppingCartIcon, AddTaskIcon, AddressAutocompleteInput, AlertIcon, AlertNotification, AnnounceIcon, 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, CellphoneIcon, ChangeRequestedIcon, ChatIcon, CheckMark, CheckboxIcon, CheckboxLabel, CheckmarkIcon, ChevronIcon, ChevronPopup, CircleProgressIcon, ClearIcon, 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, CommentBubbleIcon, CommentIcon, CommonskuMainLogo, CommunityIcon, CompletedCheckmarkIcon, ConfirmAlertPopup, ConfirmPopup, ConnectedIcon, ConnectedPlusIcon, CopyIcon, CouponIcon, SKUCreatableSelect as CreatableSelect, CreditCardIcon, Csku, CskuProps, CustomDateInput, DateRange, DateRangeDropdown, DateRangeDropdownProps, DateRangeInput, DateRangeInputProps, DateRangePicker, DateRangePickerProps, DateRangePreset, Datepicker, DaysBodyWrapper, DebouncedInput, DefaultCalendarFooter, DefaultCalendarHeader, DefaultStar, DesignIcon, DollarIcon, DoneButton, Dot, DoubleArrowIcon, DownloadIcon, DragIcon, DraggableTasksCalendar, DropArea, DropAreaProps, DropDownContent, Dropdown, DropdownItem, DropdownProps, Dropzone, DropzoneProps, DropzoneTypes, Dropzoned, DropzonedPreviews, EPOIcon, EditIcon, EllipsisIcon, EmptyStateArrowIcon as EmptyStateArrow, EpsIcon, ErrorBoundary, EstimateCircleIcon, EyeIcon, FeedPost, FileUploadIcon, FilledChevronIcon, FolderIcon, GalleryIcon, GearIcon, GlobalStyle, Grid, GridCell, GridIcon, GridItem, GridItemProps, GridProps, GridRow, GridTable, GridTableContainer, H1$1 as H1, H2$1 as H2, H3, H4, H5$1 as H5, H6, HandleIcon, HeadlessTable, HelpIcon, HistoryIcon, IconButton, IconButtonProps, IconDoc, ImageIcon, Img, InfoIcon, Input, InputDropdown, InputIconLabel, InputIconLabelContainer, InputProps, InputStepper, InputStepperStyled, IntegrationsIcon, InventoryIcon, Label, LabeledAsyncSelect, LabeledCheckbox, LabeledCheckboxProps, LabeledCreatableSelect, LabeledIconInput, LabeledInput, LabeledInputProps, LabeledMultiProgress, LabeledProgress, LabeledRadio, LabeledRadioGroup, LabeledRadioInButton, LabeledRadioInButtonGroup, LabeledRadioProps, LabeledSelect, LabeledTextarea, LayersIcon, LightIndicator, Link, LinkWithIcon, ListIcon, Loading, LockIcon, MagicEraserIcon, MagicIcon, MailIcon, MarketingStatusIcon, MeetingIcon, MenuIcon, MergeIcon, MonitorIcon, MultiProgress, NavConnectIcon, NavFinanceIcon, NavManagementIcon, NavProdIcon, NavReportsIcon, NavResourcesIcon, NavSalesIcon, NestedOption, NoteIcon, Number, NumberInput, OpportunityCircleIcon, OrderStatusIcon, Overlay, Padding, Page, Pagination, PanelContact, PanelTileContact, PanelledSelect, PanelledSelectProps, PendingApprovalIcon, PercentIcon, PhoneIcon, PinIcon, Popup, PopupHeader, PopupProps, PresentationCircleIcon, Product, ProductCard, ProductDetail, Progress, PromostandardsIcon, ProofReceivedIcon, ProofingCompleteIcon, Publisher, Radio, RadioIcon, RadioLabel, RadioProps, ReceiptLongIcon, RenderChild, ResizableIcon, ResponsiveTable, Row$1 as Row, RowPropTypes, SHARED_STYLE_MAPS, SalesArrowIcon, SalesOrderCircleIcon, SearchIcon, SKUSelect as Select, SelectionTable, SharedStyleTypes, SharedStyles, ShopIcon, ShoppingCartIcon, ShowPopup, SidePanel, SimpleWindowedTable, SimpleWindowedTableProps, SimpleWindowedTableStyles, SizerCss, SizerTypes, SizerWrapper, SkubotLogo, SkubotSpinner, SlideInIcon, Sparkles, Spinner, StarDarkIcon, StarIcon, StarLightIcon, StarRating, StateDropdown, StatusDropdown, StyledCalendarTaskBody, StyledDropArea, StyledDropdown, StyledPanel, StyledTask, SubtractIcon, SVG as SvgIcon, Switch, SwitchProps, SwitchStatedProps, SwitchStyled, TBody, TButtonIcon, TD, TDropdownItem, TH, THSorted, THead, TR, TSize, TSizeOffset, TSizeOffsetRight, TSizeStyle, TTab, Tab, TabBar, Table, TableIcon, Tabs, TabsProps, TagIcon, TargetIcon, Task, TaskBody, TaskIcon, TaskLabel, TaskName, TaskProps, TasksCalendar, TasksCalendarDayBody, TasksCalendarFooter, TemplateIcon, Text$1 as Text, TextProp, Textarea, Theme, Thermometer, TilesIcon, Toggle, ToggleLink, ToggleSwitch, ToggleSwitchProps, ToggleSwitchStatedProps, ToggleSwitchStyled, Tooltip, TrashIcon, TrendIcon, Typography, UploadIcon, UserIcon, UsersIcon, VirtualTable, VirtualTableStyles, WarnIcon, Wrapper, XIcon, colors, createMeasurementStyle, datepickerStyles, fontFamilies, fontStyles, fonts, getColor, getFontStyle, getThemeColor, getThemeFontFamily, getThemeFontSize, getThemeFontStyle, getThemeProperty, parseCskuStyles, sizes, themeOptions, toggleSizes$2 as toggleSizes, useCalendar, useClickOutside, useDelayUnmount, useFallbackRef, useLongPress, usePrefersReducedMotion, useRandomInterval, useValue, useWindowSize };