@commonsku/styles 1.17.33 → 1.17.36

package/dist/index.d.ts

@@ -2518,12 +2518,12 @@ interface DateRangePreset {
     name: string;
     label: string;
 }
-type DateRangePickerProps = Omit<DatepickerProps, 'value' | 'onChange' | 'dateFormat'> & {
+type DateRangePickerProps = Omit<DatepickerProps, "value" | "onChange" | "dateFormat"> & {
     range: DateRange;
     dateFormat?: string;
     onChange?: (range: DateRange, event?: SyntheticEvent<any>, closeDropdown?: boolean) => void;
     presets?: DateRangePreset[];
-    initialActiveTab?: 'custom' | 'preset';
+    initialActiveTab?: "custom" | "preset";
 };
 declare const DateRangePicker: React__default.ForwardRefExoticComponent<Omit<DatepickerProps, "value" | "dateFormat" | "onChange"> & {
     range: DateRange;
@@ -2813,7 +2813,7 @@ declare function Loading({ height, width, animationDuration, barWidth, barRadius
 //# sourceMappingURL=Loading.d.ts.map
 
 type SkubotSpinnerProps = {
-    size?: TIconSize;
+    size?: TIconSize | "button";
     width?: string | number;
     height?: string | number;
     altText?: string;
@@ -3124,6 +3124,8 @@ declare function WarnIcon({ color, size, altText, ...props }: WarnIconProps): Re
 type LayersIconProps = SVGIconProps;
 declare function LayersIcon({ color, size, altText, ...props }: LayersIconProps): React__default.JSX.Element;
 
+declare function ClearIcon({ color, size, altText, ...props }: SVGIconProps): 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
 
@@ -3643,4 +3645,4 @@ interface PaginationProps {
 }
 declare const Pagination: ({ currentPage, totalPages, onChange, }: PaginationProps) => React__default.JSX.Element;
 
-export { AddIcon, AddNoteIcon, AddShoppingCartIcon, AddTaskIcon, AddressAutocompleteInput, 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, CommentBubbleIcon, CommentIcon, CommonskuMainLogo, CommunityIcon, CompletedCheckmarkIcon, ConfirmAlertPopup, ConfirmPopup, ConnectedIcon, ConnectedPlusIcon, 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, 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, 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, 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$1 as toggleSizes, useCalendar, useClickOutside, useDelayUnmount, useFallbackRef, useLongPress, usePrefersReducedMotion, useRandomInterval, useValue, useWindowSize };
+export { AddIcon, AddNoteIcon, AddShoppingCartIcon, AddTaskIcon, AddressAutocompleteInput, 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, 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, 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, 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, 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, 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$1 as toggleSizes, useCalendar, useClickOutside, useDelayUnmount, useFallbackRef, useLongPress, usePrefersReducedMotion, useRandomInterval, useValue, useWindowSize };